如果CSS选择器是#id,你需要确定它们的范围吗？

如果我有这样的结构：

<div id="main">
  <div id="sidebar">
    <div id="tag-cloud"/>
  </div>
</div>

… css的最佳实践是什么：

#main #sidebar #tag-cloud { ... }
#tag-cloud { ... }

或者如果id =’main’而不是class =’main’,那么范围会更糟吗？我只是想知道,如果你有ids,你是否需要适用范围？

解决方法

要看.大多数时候,你可以说：

#tag-cloud { ... }

是最好的(性能方面,见下文).这个：

#main #sidebar #tag-cloud { ... }

只是做了很多不必要的检查,必然会成功.

除非你想这样做：

#sidebar #tag-cloud { ... }
#not-sidebar #tag-cloud { ... }

在这种情况下,作用域定义了不同的外观,具体取决于#tag-cloud的位置.当然,您的页面中只能有一个#tag-cloud,但无论如何,您的CSS都可以处理这两种情况.

CSS检查从右到左完成.这个：

#main #sidebar #tag-cloud { ... }

评估为：“具有ID标签的元素 – 云,其父级具有ID侧边栏,其父级具有ID主.如果这是您的网站的外观,那么这只是一大堆无用的DOM遍历.

更不用说过度具体,多余的范围,如果你修改你的站点结构,整个CSS必须在很多地方改变,这在某种程度上违背了目的.