如果CSS选择器是按#id的，你需要确定它们的作用域吗？

Question

如果我有一个这样的结构：

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

..。什么是css的最佳实践：

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

或者，如果id='main'改为class='main'，对作用域来说会更糟吗？我只是想知道，如果你有if，你还需要作用域吗？

Answer 1

视情况而定。大多数时候，你可以说：

#tag-cloud { ... }

是最好的(性能方面，见下文)。这一点：

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

只是做了很多不必要的检查，这些检查肯定会成功。

除非您想要这样做：：

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

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

CSS检查是从右到左进行的。这一点：

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

计算结果为：“ID为tag-cloud的元素，其父元素的ID为sidebar，而父元素的ID为main。如果您的站点看起来就是这样，那么这只是一大堆无用的DOM遍历。

更不用说这样的事实了，如果你修改你的站点结构，那么整个CSS就必须在很多地方发生变化，这在某种程度上违背了你的目的。

Answer 2

你已经说过了:ID是唯一的。因此，作用域只会增加混乱。但是，如果它们是出于纯粹的文档目的，我会通过缩进规则来替换它们。

例如，代替

#main {
    /**/
}

#main #sidebar {
    /**/
}

#main #sidebar #tag-cloud {
    /**/
}

做

#main {
    /**/
}

    #sidebar {
        /**/
    }

        #tag-cloud {
            /**/
        }

Answer 3

通常，在html文档中不应该有ID冲突。因此，从这个角度来看，ID的作用域是浪费时间的。

但是，如果您错误地拥有多个具有相同id的元素，那么您可能需要使用作用域。但这会导致无效的html，并可能导致其他不期望的结果，因此应该避免。