0

目前正在调整一个主题，并试图寻找这个问题的答案！我没有被困住 - 但更多只是出于好奇而想知道答案。

我明白那个

  • “#”表示一个 id 和
  • “。” 表示一个类。

我也一直在阅读这篇文章，了解如何通过元素/ids/类的组合为 html/css 添加特异性，即：

a.fancy { color: red; } /*an element that has an anchor and a class = red.*/

但是，我正在处理的代码具有以下我不理解的元素：

div.footer {background-color: {{ settings.footer_color }};

为什么在简单地使用“。”时将“div.footer”指定为 div 和类。就够了吗？在我看来，没有 div 就可以使用类“.footer”是没有意义的？

希望你能帮我解决这个问题！

4

4 回答 4

3

div.footer意味着您只针对<div>具有 class 的元素.footer。

<div class="footer">This is targeted.</div>

<p class="footer">This isn't targeted, as it isn't a div with the class .footer.</p>

div .footer但是，将针对所有具有该类的元素.footer的后代<div>元素。

<div><p class="footer">This is targeted.</p></div>

<section><p class="footer">But this isn't targeted.</p></section>
于 2013-06-20T00:11:14.017 回答
3

div.footer表示该元素必须既是 a<div>又具有类footer。

.footer将触发任何具有 class 的元素footer；例如，一个<span class="footer".

于 2013-06-20T00:11:16.860 回答
1

随着 html5 的新实现<footer>是一个合法的标签，就像<div>or一样<p>。.在页脚声明将其限制为类名而不是标签之前的时间段可能令人困惑。

所以在你的情况下：div.footer=<div>类名footer= <div class="footer>。

您可以做出这样的声明的原因有很多。

示例 html

<div>
  <div class="footer">Footer only</footer>
  <div>Div only</div>
  <footer>Footer tag; DIFFERENT</footer>
</div>

示例 CSS

div {
 border: 1px solid red;
}
.footer {
 background: blue;
 color: #fff; /* white font color */
}

根据你想做什么，让我们用具体的div.footer例子来展示我们能做什么。返回

遗产

通过继承，div.footer将继承“3 个属性” -> background，color并border从divand.footer声明中继承。

现在您可能想要覆盖其中一些属性，所以......

覆盖属性

使用这样div.footer { color: red; }的东西会覆盖白色。

布局洞察

css 的美妙之处在于您可以使用声明来“洞察”html 标记的布局。

省略属性我将编写 css 如下：

#footer {}
#footer ul {}
#footer ul li {}
#footer p {}
#footer p a {}

的HTML：

<div id="footer">
 <ul>
   <li>List 1</li>
   <li>LIst 2</li>
 </ul>
 <p>Hello! Copyright <a href="#">website company name.</a></p>
</div>

然后，由于使用了后代字符，您可以仅通过 css 对 html 进行逆向工程。这最大限度地发挥了“级联”的力量。

- 现在，我希望其中一些能给你一些见解。其他一些指针是这样的：

  • 通常一个网页只有一个页脚。当只有一个东西时，#总是使用 id 选择器。
  • 使用类不仅可以将样式应用于多个元素，还可以提供“标记的意义​​”-> 回到“布局洞察力”的原则来理解我的意思。
  • div.footer应该可以更简单.footer现在，可能有必要只包括div说“我只想将这个类应用于 div”，在这种情况下就去做吧。但是定义你所有的声明div.someClasName并不是那么有价值。
  • 不要使用标签名称作为类名。div.div非常令人困惑 - 特别是如果您正在编程一段时间。因此，既然<footer>现在是一个合法标签，你不应该将它作为类名应用。另一方面，“#footer”可能有不同的说法，因为它只能在网页中存在一次。
于 2013-06-20T00:58:22.823 回答
0

这是关于特异性。比（具有该类的任何元素div.footer）更具体（具有该特定类的 div ）。.footer

至于何时使用其中一种，这实际上取决于您正在构建的标记和 CSS。

于 2013-06-20T00:28:50.223 回答