Question

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

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

因此，我们在searchbox ID，标头ID，容器ID，toprightsearch类中都有一个mainbody类。

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

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

有关此主题的任何其他信息将不胜感激。

由于

Answer 1

.searchbox {}

使用.searchbox

设置样式

.mainbody .searchbox{}

任何来自任何.mainbody，直接子，孙子，四重孙子的.searchbox样式都无关紧要。

#toprightsearch > .searchbox {}

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

#container * .searchbox {}

样式.searchbox是#container的孙子或后来。

以下是关于该主题的好文档：w3C selectors

Answer 2

如果您包含更多父母，则会增加选择者的特异性。你不应该忽略父母的跨浏览器问题。

没有正确的父母列出的数量;这取决于您对标记的要求。正如您所看到的，selector1 selector2表示selector2内任意级别的selector1，您可以针对您需要的任何行为进行调整。

在您的示例中，您应该列出.mainbody #container #header #toprightsearch .searchbox，如果意味着，那么该样式仅适用于整个层次结构内的.searchbox es。如果相反，您希望在条件下存在其他条件的.searchboxes以获得相同的样式，那么您应该在层次结构中限制较少。这只是关于你想要完成的事情。

评论：ID产生更多的特异性，因此省略它们会更多地降低规则的特异性。

Answer 3

Id特定于该页面。所以你只需要使用

#toprightsearch {
 stylename: stylevalue;
}

如果您正在寻找嵌套类，那么正确的格式是

.header .textBoxes {
  stylename: stylevalue;
}

如果您知道父母的确切孩子，那么您使用＆gt;标志。所以如果你的文件是这样的：

<div class="header">
    <div class="menu">
         <input type="text" class="textBox" />
    </div>
</div>

您可以使用：

 .header > .menu > .textBox {somestyle:somevalue;}

这意味着只有.textBox类直接位于.menu类项目内的项目，该项目本身直接位于具有.header类的元素下面。

Answer 4

来自W3 Selectors Documentation：

后代选择器以模式表达这种关系。后代选择器由两个或多个由空格分隔的选择器组成。当元素B是某个祖先元素A的任意后代时，形式为“A B”的后代选择器匹配。

因此，简而言之，您不必包含所有的父元素，并且不应导致任何跨浏览器问题。但是，使用此选择器：

.mainbody .searchbox {}

定义的样式将应用于类searchbox的任何元素，无论它是直接还是间接地从具有类mainbody的元素下降。

使用您建议的选择器：

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

定义的样式更具体，因此只有来自具有类mainbody的元素的元素，然后是ID为#container，#header，#toprightsearch的元素按此顺序，并且具有类名searchbox将具有已应用的已定义样式。

Answer 5

理论上，ID只应用于页面上的一个特定项目。因此，您应该只有一个ID为toprightsearch的项目，因此对于您的CSS，您只需要指明：

toprightsearch .searchbox {}

因为您的网页上只有一个ID为toprightsearch的项目，所有其他选择器都是不必要的。

如果您的网页上有两个ID为toprightsearch的项目，那么编码操作就会很糟糕。

Answer 6

下面的代码完成了它所说的内容（至少在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和类是否有任何问题。

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

6 个答案: