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

CSS Style Nesting - Proper Form?

提问by user103219

I am having a problem trying to find any specific details on how to properly write CSS rules in a stylesheet where the class or ID is nested within many other IDs and styles, e.g.

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

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

So here we have a searchboxclass within a toprightsearchID, in a header ID, in a container ID, in a mainbodyclass.

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

But it appears to work properly if I omit some of the IDs.

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

What is the correctway of listing these?
If I include all of the parents does it make it more specific? Can it error on different browsers if I don't include all?

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

And any additional information on this topic would be appreciated.

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

Thanks

谢谢

采纳答案by chaos

If you include more parents, it does increase selector specificity. You shouldn't have cross-browser problems omitting parents.

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

There is no correctnumber of parents to list; it depends on what you require for your markup. As you're seeing, selector1 selector2means a selector2at any level inside a selector1, and you can tune that for whatever behavior you need.

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

In your example, you should list .mainbody #container #header #toprightsearch .searchboxif what you meanis for the style to only apply to .searchboxes that are inside that entire hierarchy. If contrariwise you want .searchboxesthat exist other under conditions to get the same style, you should be less restrictive in the hierarchy. It's only about what you're trying to accomplish.

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

Re comment: IDs produce more specificity, so omitting them reduces your rule's specificity more.

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

回答by Ryan Florence

.searchbox {}

Styles anything with .searchbox

使用 .searchbox 设置任何样式

.mainbody .searchbox{}

Styles any .searchbox that descends from any .mainbody, direct child, grandchild, quadruple great grandchild, doesn't matter.

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

#toprightsearch > .searchbox {}

Styles only .searchboxes that are direct children of #toprightsearch

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

#container * .searchbox {}

Styles .searchbox's that are grandchild or later of #container.

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

Here's a good document on the topic: w3C selectors

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

回答by David

Id's are specific to the page. So you'd just use

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

#toprightsearch {
 stylename: stylevalue;
}

If your looking for nested classes then the correct format is

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

.header .textBoxes {
  stylename: stylevalue;
}

If you know the exact child of a parent then you use the > sign. So if your document was like this:

如果您知道父母的确切孩子，那么您可以使用 > 符号。所以如果你的文件是这样的：

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

You can use this:

你可以使用这个：

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

This means only items with a .textBox class directly inside of a .menu class item which is itself directly below an element with a class of .header.

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

回答by Alex Rozanski

From the W3 Selectors Documentation:

来自W3 选择器文档：

Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by white space. A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A.

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

So in short, no you do not have to include allof the parent elements, and should not cause any cross-browser problems. However, with this selector:

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

.mainbody .searchbox {}

The styles defined will apply to any element with a class of searchboxwhether it descends directly or indirectly from an element with class mainbody.

定义的样式将适用于任何具有类的元素，searchbox无论它是直接还是间接来自具有类的元素mainbody。

With your proposed selector, however:

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

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

The styles defined are more specific, and so only elements that descend from an element with class mainbody, then the elements with IDs of #container, #header, #toprightsearchin that order and that have a class name searchboxwill have the defined styles applied.

定义的样式是更具体的，所以只从一个元素与下降类元素mainbody，然后用ID的元素#container，#header，#toprightsearch按照这个顺序，并且有一个类名称searchbox将具有所施加的定义的样式。

回答by Neptune704

Theoretically, an ID should only be used for one specific item on a page. So you should only have one item with an ID of toprightsearchso, for your CSS to work you only need to indicate:

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

#toprightsearch .searchbox {}

because there is only one item on your page with an ID of toprightsearch, All the other selectors are unnecessary.

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

If you have two items on your page with an ID of toprightsearchthen that is bad coding practice.

如果您的页面上有两个 ID 为 的项目，toprightsearch那么这是一种糟糕的编码习惯。

回答by jao

The code below does what it says (at least in Firefox). it colors the input red

下面的代码做它所说的（至少在 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>

I think you should see if there went anything wrong in spelling the ID's and classes.

我认为您应该查看 ID 和类的拼写是否有问题。