为什么人们在css文件中使用div.border而不仅仅是.border？

Question

我想知道为什么有些css文件使用div.border而不是.border来列出CSS中的扇区。我已经看到它用于多个扇区，例如div.footer {color:#000000;}，而不仅仅是.footer {color:#000000;}

感谢您的帮助。

Answer 1

您可能需要指定元素的原因有三个：

1. 您正在将该类应用于多种类型的元素和需要 添加或覆盖特定元素的规则。

2. 您希望在样式表中提供上下文信息 （通常为其他开发者提供）

3. 您需要额外的特异性来覆盖另一个类的样式规则。

总的来说，我认为＃1是一个坏主意，除了一些实用程序类（如浮点数或清除），我认为通过使用像Saas和mixins这样的预处理器可以更好地处理

我认为第二种情况具有可疑价值。如果你碰到第三种情况（就像在!important中撒上一样），你可能想要重构一些东西以避免这样做。在任何情况下都要注意，如果不需要它们，那么向选择器添加元素只会减慢匹配速度

Answer 2

点之前存在“div”意味着选择器仅适用于div类型的DOM元素。

因此，例如，如果您有一个名为“foo”的类，

.foo {
    color:#ff0000;
}

它会使文本变成红色。使用div.foo会导致指令仅应用于该类的div。

Answer 3

考虑<div class="border">Div with border</div>和<p class="border">Paragraph with border</p>之间的区别。 .border { ... }的风格会影响这两种风格，而div.border{ ... }只会影响div。

Answer 4

如果你想要写的.border类规则只适用于div容器，而不是表容器或其他元素，那就是你如何做的。关于CSS选择器有很多好文章，其中this只是一个。

Answer 5

如上所述，将div元素添加到页脚类将确保样式仅应用于具有类“footer”的div，而不应用于具有类“footer”的其他元素。

理想情况下，如果您确定只在一个特定DOM元素上使用该类，则只需使用.footer。在DOM之前添加DOM元素是不必要的，并且对渲染性能有负面影响（好吧，它实际上没有太大影响，但它仍然效率低下）。