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

我的样式表定义是否应该镜像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.

解决方法

与任何代码(或任何书写)一样,您应该编写它以尽可能清晰准确地表达您的意图.

因此,如果您想要任何具有属性类的元素,该属性类是具有item类的元素的后代,该元素本身是具有id的容器的元素的后代以具有这些样式,那么请编写#container .item .property.

如果你想要一个属性类的元素拥有这些样式而不管它的后代是什么,那么写一下.property.这适用于您希望在网站上的许多不同位置使用的类;例如按钮样式.

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

原文地址：https://www.jb51.cc/css/215195.html