我在尝试查找有关如何在样式表中正确编写 CSS 规则的任何具体细节时遇到问题，其中类或 ID 嵌套在许多其他 ID 和样式中，例如
.mainbody #container #header #toprightsearch .searchbox {}
所以这里我们在toprightsearch ID、标头 ID、容器 ID、mainbody 类中都有一个 searchbox 类。
但如果我省略了一些 ID，它似乎可以正常工作。
列出这些的正确方式是什么？
如果我包括所有的父母，它会更具体吗？
如果我不包含所有内容，它会在不同的浏览器上出错吗？
我们将不胜感激有关此主题的任何其他信息。
谢谢
【问题讨论】：
.searchbox {}
使用 .searchbox 设置任何样式
.mainbody .searchbox{}
为任何 .mainbody、直子、孙子、四重曾孙子孙子的任何 .searchbox 设置样式都没有关系。
#toprightsearch > .searchbox {}
仅样式 .searchboxes 是 #toprightsearch 的直接子代
#container * .searchbox {}
#container 的孙子或更高版本的样式 .searchbox。
这是一个关于这个主题的好文档：w3C selectors
【讨论】：
如果您包含更多父母，它确实会增加选择器的特异性。忽略父母不应该有跨浏览器的问题。
没有正确个父母要列出；这取决于您对标记的要求。如您所见，selector1 selector2 表示selector2 在selector1 内的任何级别，您可以根据需要对其进行调整。
在您的示例中，您应该列出.mainbody #container #header #toprightsearch .searchbox，如果您的意思是样式仅适用于整个层次结构内的.searchboxes。相反，如果您希望在其他条件下存在的.searchboxes 获得相同的样式，则您应该在层次结构中减少限制。这只是关于你想要完成的事情。
重新评论：ID 会产生更多的特异性，因此省略它们会进一步降低规则的特异性。
【讨论】：
ID 特定于页面。所以你只需使用
#toprightsearch {
stylename: stylevalue;
}
如果您正在寻找嵌套类，那么正确的格式是
.header .textBoxes {
stylename: stylevalue;
}
如果您知道父母的确切孩子，则使用 > 符号。所以如果你的文档是这样的：
<div class="header">
<div class="menu">
<input type="text" class="textBox" />
</div>
</div>
你可以用这个：
.header > .menu > .textBox {somestyle:somevalue;}
这意味着只有 .textBox 类直接位于 .menu 类项目内的项目，该项目本身直接位于具有 .header 类的元素下方。
【讨论】：
后代选择器在模式中表达了这种关系。后代选择器由两个或多个用空格分隔的选择器组成。当元素 B 是某个祖先元素 A 的任意后代时，“A B”形式的后代选择器匹配。
所以简而言之，不，您不必包含 所有 的父元素，也不应该导致任何跨浏览器问题。然而，有了这个选择器：
.mainbody .searchbox {}
定义的样式将适用于任何具有searchbox 类的元素，无论它是直接还是间接从具有mainbody 类的元素下降。
但是，使用您建议的选择器：
.mainbody #container #header #toprightsearch .searchbox {}
定义的样式更具体，因此只有从具有mainbody 类的元素继承的元素，然后是具有#container、#header、#toprightsearch 的 ID 的元素，并按此顺序具有一个类名称searchbox 将应用定义的样式。
【讨论】：
理论上，ID 只能用于页面上的一个特定项目。因此，您应该只有一个 ID 为 toprightsearch 的项目，因此，为了让您的 CSS 正常工作，您只需要指出：
#toprightsearch .searchbox {}
因为您的页面上只有一个 ID 为 toprightsearch 的项目，所以所有其他选择器都是不必要的。
如果您的页面上有两个 ID 为 toprightsearch 的项目，那么这是不好的编码习惯。
【讨论】：
下面的代码执行它所说的（至少在 Firefox 中）。它将输入着色为红色
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
.mainbody #container #header #toprightsearch .searchbox {
background-color:red;
}
</style>
</head>
<body class="mainbody">
<div id="container">
<div id="header">
<div id="toprightsearch">
<input type="text" class="searchbox" />
</div>
</div>
</div>
</body>
</html>
我认为您应该看看 ID 和类的拼写是否有问题。
【讨论】：