Question

所以，我不确定我在这里偶然发现了什么。我正在使用一些CSS，我知道做这样的事情很常见：

#content{
    /* Style the content div. */
}
#content p{
    /* Style all p elements in the content div. */
}

我想给一个特定的p元素float:right样式。内容元素中只会出现一个这样的p元素。当然，我只是给这个元素一个id，但后来我有了这样做的想法：

#content #right_floating_p{
    float:right;
}

当我运行代码时，这是有效的，但我想知道最佳实践以及这是否实际上做了任何范围明智。我可以很容易地为right_floating_p定义一个单独的id，但对我而言，它应该用内容id定义它是很自然的，因为它只能在内容元素中的一个p元素上使用。

如果有人有任何关于此语法的信息，请告诉我们。谢谢！

Answer 1

Alvaro在his comment above中钉了它。

id在页面上必须是唯一的，但不一定在整个网站上。因此，举例来说，如果您在每个页面上都有#right_floating_p元素，但它只有某个页面上有一个#content元素作为祖先，您希望它的样式不同，那么您就可以了想要使用#content #right_floating_p选择器来应用特定于上下文的样式。

Answer 2

我的建议是仅包含最后一个ID。这是相当标准的separation of concerns。如果您想要更改第一个ID #content，但最后一个#right_floating_p仍有意义并且不应更改，该怎么办？如果您不必要地指定了某些内容，则会有更多的错误空间。

其他原因很好：

为您的用户提供更小，更快（但几乎没有）的下载大小。
在我看来更具可读性。
更快（但几乎没有）表现。

一般来说，就性能而言，过度限定标签is bad practice。浏览器从右到左阅读您的选择器，在它解释您的#content选择器时，该信息毫无意义。我的建议是不要相信浏览器会针对此进行优化。

Answer 3

我建议尽可能使用最精确的选择器，不仅是为了可读性和文件大小，还要考虑到特异性。

CSS选择器对它们有specificity，因此如果您稍后要覆盖它（例如使用媒体查询），则更具体的选择器将覆盖不太具体的选择器。

#content #right_floating_p {
    color: red;
}
div #right_floating_p {
    color: green; /* Will not apply, as it's less specific */
}
p {
    color: black; /* Even less specific */
}

它可以使用第一个选择器，但它没有必要。

是＆＃34; nest＆＃34;是否正确的语法？ CSS中其他id声明内的id声明？

3 个答案: