CSS 选择器中的多个类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4357211/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple classes in CSS Selector
提问by ZZ Coder
I see a selector like this,
我看到一个这样的选择器，
.class1 .class2 .class3 {
}
What does this mean?
这是什么意思？
I've used multiple class selectors without spaces. Space means descendant but it doesn't make sense for classes.
我使用了多个没有空格的类选择器。空间意味着后代，但它对类没有意义。
回答by Amit G
Let's say there's a page with the following markup,
假设有一个带有以下标记的页面，
<div class="class1">
<div class="class2">
<div class="class3">
Some page element(s).
</div>
</div>
</div>
The CSS you provided would style all elements under class3, which are under class2, which are under class1.
您提供的 CSS 将设置 class3 下、class2 下和 class1 下的所有元素的样式。
i.e. let's say this was the styling,
即让我们说这是造型，
.class1 .class2 .class3{
color:red;
}
It would render the text as red, which is the equivalent of the following,
它会将文本呈现为红色，这相当于以下内容，
div.class1 div.class2 div.class3 {
color:red;
}
Finally, the following would do nothing,
最后，以下什么都不做，
.class1.class2.class3{
color:red;
}
Edit:If the markup instead was the following,
编辑：如果标记如下，
<div class="class1 class2 class3">
Some page element(s).
</div>
It would work and render the text in red.
它会工作并将文本呈现为红色。
Note: < IE7 might have issues with the above...
注意：< IE7 可能有上述问题...
http://www.thunderguy.com/semicolon/2005/05/16/multiple-class-selectors-in-internet-explorer/http://www.w3.org/TR/2004/CR-CSS21-20040225/selector.html#class-html
http://www.thunderguy.com/semicolon/2005/05/16/multiple-class-selectors-in-internet-explorer/ http://www.w3.org/TR/2004/CR-CSS21-20040225/选择器.html#class-html
回答by BoltClock
The other answers provide you with the explanation you need; I'll chip in with a practical use case just to feed anyone's curiosity.
其他答案为您提供了所需的解释；我将使用一个实际用例来满足任何人的好奇心。
A common real-world use case for multiple class selectors separated by descendant combinators is when a site has a different body class for certain pages, or certain devices.
由后代组合器分隔的多个类选择器的一个常见实际用例是当站点对某些页面或某些设备具有不同的主体类时。
For example, consider this markup of a simple web site. Besides the header and footer, it also has a content column and two sidebars:
例如，考虑一个简单网站的标记。除了页眉和页脚，它还有一个内容栏和两个侧边栏：
<!-- DTD, html, head... -->
<body>
<div id="wrap">
<div id="header">
<h1>My Site</h1>
</div>
<div id="content">
<!-- ... -->
</div>
<div id="side1" class="sidebar"><!-- ... --></div>
<div id="side2" class="sidebar"><!-- ... --></div>
<div id="footer">
<p>Copyright LOLOLOL</p>
</div>
</div>
</body>
</html>
The default setup might be to arrange #contentbetween the .sidebars, done with some floating trickery I won't get to here.
默认设置可能是#content在.sidebars之间安排，用一些浮动技巧完成，我不会在这里介绍。
On a mobile device, besides resizing the whole thing for the small resolution, perhaps the designer wants to do away with the sidebars to reclaim some horizontal screen estate. Aside from media queries, there's also the much simpler option to use server-side code to detect mobile browsers and tag bodywith a class accordingly, like this (ASP.NET C# example):
在移动设备上，除了为小分辨率调整整个事物的大小外，设计师可能还想取消侧边栏以回收一些水平屏幕空间。除了媒体查询之外，还有一个更简单的选择，即使用服务器端代码来检测移动浏览器并body相应地使用类进行标记，如下所示（ASP.NET C# 示例）：
<% if (((HttpCapabilitiesBase) Request.Browser).IsMobileDevice) { %>
<body class="mobi">
<% } else { %>
<body>
<% } %>
That's where your example comes in handy. The designer just uses the following rule to hide the sidebars from mobile devices:
这就是你的例子派上用场的地方。设计者只是使用以下规则来隐藏移动设备的侧边栏：
/* This would appear just beneath the .sidebar { ... } rule */
.mobi .sidebar {
display: none;
}
Of course, the same browser detection code could be used to hide the sidebar markup altogether, shaving page size and all that jazz, but again that's just another way of approaching this. I'm just giving a quick practical example of how multiple class selectors in a hierarchy can be used in CSS.
当然，可以使用相同的浏览器检测代码来完全隐藏侧边栏标记、缩小页面大小和所有爵士乐，但这只是另一种解决方法。我只是给出了一个快速的实际示例，说明如何在 CSS 中使用层次结构中的多个类选择器。
回答by Maksim Vi.
div{
padding: 5px;
border: 1px solid #f00
}
.class1 .class2 .class3 {
background-color: #000;
}
will change the background of the most inner div:
将改变最内部 div 的背景：
<div class="class1">
<div class="class2">
<div class="class3">
</div>
</div>
</div>
In other words it means apply style for class3which is a child of class2which is a child of class1.
换句话说，它意味着应用样式，class3其子项class2是 的子项class1。
If you ignore spaces your style rule will apply to the following:
如果您忽略空格，您的样式规则将适用于以下内容：
.class1.class2.class3{
background-color: #000;
}
<div class="class1 class2 class3">
</div>
回答by 01001111
It still means descendant and it does make sense for classes if you have nested hierarchies. For example:
它仍然意味着后代，如果您有嵌套层次结构，它确实对类有意义。例如：
.blackOnWhite .title {
color:black;
}
.whiteOnWhite .title {
color:white;
}
回答by pierrotlefou
To match a subset of "class" values, each value must be preceded by a ".", in any order.
Example(s):
For example, the following rule matches any P element whose "class" attribute has been assigned a list of space-separated values that includes "pastoral" and "marine":
p.pastoral.marine { color: green }
This rule matches when class="pastoral blue aqua marine" but does not match for class="pastoral blue".
要匹配“类”值的子集，每个值必须以任意顺序在前面加上“.”。
例子）：
例如，以下规则匹配其“class”属性已分配有空格分隔值列表的任何 P 元素，其中包括“pastoral”和“marine”：
p.p.pastoral.marine { 颜色：绿色}
此规则在 class="pastoral blue aqua Marine" 时匹配，但在 class="pastoral blue" 时不匹配。
http://www.w3.org/TR/2004/CR-CSS21-20040225/selector.html#class-html
http://www.w3.org/TR/2004/CR-CSS21-20040225/selector.html#class-html
