示例html

Question

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

我理解

我也一直在阅读post关于如何通过组合元素/ ids /类来增加html / css的特异性，即：{/ p>

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

但是我正在处理的代码中包含以下我不理解的元素：

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

为什么在简单地使用“。”时将“div.footer”指定为div和class。会满足吗？在我看来，如果没有div，可以使用“.footer”这个类吗？

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

Answer 1

div.footer表示您仅使用课程<div>定位.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>

Answer 2

div.footer表示该元素必须都是<div>并且必须属于footer类。

.footer会触发任何类footer的元素;例如，<span class="footer"。

Answer 3

html5的新实施<footer>是一个合法的标记，就像<div>或<p>一样。在页脚声明将其限制为类名而不是标记之前，期间.可能会令人感到困惑。

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

您可以提出此类声明的原因很多。

<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个属性” - ＆gt;来自background和color声明的border，div和.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选择器ALWAYS。
使用类不仅可以将样式应用于多个元素，还可以提供“标记的含义” - ＆gt;回到“布局洞察”的原则来理解我的意思。
div.footer应该更简单地.footer现在，可能需要包含div只是为了说“我只想将此类应用于div”，在这种情况下去吧。但是使用div.someClasName定义所有声明并不是那么有价值。
请勿使用标签名称作为类名。 div.div非常令人困惑 - 特别是如果你正在编程一段时间。因此，由于<footer>现在是合法标记，因此不应将其作为类名应用。另一方面，“＃footer”可能会有不同的争论，因为它只能在网页中存在一次。

Answer 4

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

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