CSS 样式嵌套 - 正确的形式？

Question

我在尝试查找有关如何在样式表中正确编写 CSS 规则的任何具体细节时遇到问题，其中类或 ID 嵌套在许多其他 ID 和样式中，例如

.mainbody #container #header #toprightsearch .searchbox {}

所以这里我们有一个 searchbox 类，在 toprightsearch ID 中，在 header ID 中，在容器 ID 中，在 mainbody 类中.

但如果我省略一些 ID，它似乎可以正常工作。

列出这些的正确方式是什么？
如果我包括所有的 parent ，它会使它更具体吗？如果我不包含所有内容，它会在不同的浏览器上出错吗？

如能提供有关此主题的任何其他信息，我们将不胜感激。

谢谢

Answer 1

.searchbox {}

使用 .searchbox 设置任何样式

.mainbody .searchbox{}

为任何 .mainbody、直接子代、孙代、四重曾孙代的任何 .searchbox 设置样式都没有关系。

#toprightsearch > .searchbox {}

仅样式 .searchboxes 是#toprightsearch 的直接子项

#container * .searchbox {}

样式 .searchbox 是#container 的孙代或更高版本。

这是关于该主题的一个很好的文档:w3C selectors