css - 我应该在我的 CSS 定义中为每个元素/类写下完整的层次结构路径吗？

Question

我的样式表定义应该反射(reflect) DOM 层次结构吗？如果我有:

<div id="container">
  <div class="item">
    <div class="property">
       <span id="1243"></span>
    </div>
  </div>
</div>

当我想为每个属性设置样式时，我应该只说:

.property { color: red; }

或者我应该怎么做

#container .item .property { color: red;}

我都用过。我喜欢第一个，因为它简洁，因为如果层次结构发生变化，我不需要更新它，但第二个可以帮助我阅读 CSS。

Answer 1

与任何代码(或任何文字)一样，您应该尽可能清楚准确地表达您的意图。

因此，如果您想要任何具有 property 类的元素，该元素是具有 item 类的元素的后代，而该元素本身是具有 id 的元素的后代container 具有这些样式，然后编写 #container .item .property。

如果您希望具有 property 类的元素具有这些样式，而不管它的后代是什么，请编写 .property。这适用于您希望在站点的许多不同位置使用的类；例如按钮样式。

我要注意的一件事是，您添加的每个 CSS 选择器都会增加选择器的特异性，即 #container .item .property 比 .property 更具体。所以使用 #container .item .property 应用的样式将需要一个更具体的选择器来覆盖它们，如果你想稍后再写，迫使你再次写出这个更长的选择器。但我认为与写下你的意思相比，这是次要问题。