19

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

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

所以这里我们searchbox在一个toprightsearchID、一个标题ID、一个容器ID、一个类中有一个mainbody类。

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

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

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

谢谢

4

6 回答 6

35 
.searchbox {}

使用 .searchbox 设置任何样式

.mainbody .searchbox{}

样式化任何 .mainbody、直子、孙子、四重曾孙子的任何 .searchbox 都没关系。

#toprightsearch > .searchbox {}

仅样式化作为 #toprightsearch 的直接子级的 .searchbox

#container * .searchbox {}

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

这是一个关于该主题的好文档：w3C 选择器

于 2009-06-07T17:00:18.167 回答
7

如果你包括更多的父母，它确实会增加选择器的特异性。您不应该在忽略父母时遇到跨浏览器问题。

没有正确数量的父母可以列出；这取决于您对标记的要求。如您所见，selector1 selector2表示 aselector2内任何级别的 a selector1，您可以根据需要调整它以适应任何行为。

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

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

于 2009-06-07T16:49:06.933 回答
4

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 类的元素下方。

于 2012-08-20T20:48:25.180 回答
2

来自W3 选择器文档：

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

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

.mainbody .searchbox {}

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

但是，使用您建议的选择器：

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

定义的样式更具体，因此只有从具有 class 的元素继承的元素mainbody，然后具有 ID 的元素#container, #header,#toprightsearch并且具有类名searchbox的元素将应用定义的样式。

于 2009-06-07T16:57:55.923 回答
1

从理论上讲，ID 应该只用于页面上的一个特定项目。所以你应该只有一个 ID 为toprightsearchso 的项目，为了让你的 CSS 工作你只需要指出：

#toprightsearch .searchbox {}

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

如果您的页面上有两个 ID 为toprightsearchthen 的项目，这是不好的编码习惯。

于 2017-10-24T19:08:33.557 回答
0

下面的代码执行它所说的（至少在 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 和类的拼写是否有问题。

于 2009-06-07T16:45:29.823 回答