我的样式表定义是否应该镜像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应用的样式将需要一个具有更高特异性的选择器来覆盖它们,如果您想稍后,则强制您再次编写这个更长的选择器.但我认为与写下你的意思相比,这是次要问题.
