CSS 中其他 id 声明中的 "nest" id 声明的语法是否正确？

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 在中取得了成功。

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 */
}

使用第一个选择器会起作用，但这不是必需的。

CSS 中其他 id 声明中的 "nest" id 声明的语法是否正确？

Is it proper syntax to "nest" id declarations inside other id declarations in CSS?

css

nested