css - 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

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

这很好的其他原因:

• 为您的用户提供更小、更快(但勉强)的下载大小。
• 我认为更具可读性。
• 性能更快(但勉强)。

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