CSSselect器中有多个类
我看到这样的select器，
.class1 .class2 .class3 { } 这是什么意思？
我已经使用了多个没有空格的类select器。 空间意味着后代，但对于阶级来说是没有意义的。
比方说，有一个页面有以下标记，
<div class="class1"> <div class="class2"> <div class="class3"> Some page element(s). </div> </div> </div>
你所提供的CSS会为class2下的class3下的所有元素设置样式，class1下面是class2。
即让我们说这是造型，
.class1 .class2 .class3{ color:red; }
它会使文本呈现红色，这是相当于以下内容，
div.class1 div.class2 div.class3 { color:red; }
最后，下面什么都不会做，
.class1.class2.class3{ color:red; }
编辑：如果标记而不是以下，
<div class="class1 class2 class3"> Some page element(s). </div>
它会工作并呈现红色的文字。
注意：<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＃类HTML
其他答案为您提供您需要的解释; 为了满足任何人的好奇心，我将会用一个实际的用例。
对于由后代组合器分隔的多个类select器来说，一个常见的现实世界用例是当某个站点对于某些页面或某些设备具有不同的主体类别时。
例如，考虑一个简单的网站的这个标记。 除了页眉和页脚，它还有一个内容列和两个侧边栏：
<!-- 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>
默认设置可能是在.sidebar之间安排#content ，用一些浮动的.sidebar来完成，我不会到达这里。
在移动设备上，除了为小分辨率调整整个事物外，也许devise师想要取消侧边栏来回收一些水平屏幕的地产。 除了媒体查询之外，还有更简单的选项来使用服务器端代码来检测移动浏览器，并相应地为类标记body ，如下所示（ASP.NET C＃示例）：
<% if (((HttpCapabilitiesBase) Request.Browser).IsMobileDevice) { %> <body class="mobi"> <% } else { %> <body> <% } %>
这就是你的例子派上用场的地方。 devise者只是使用以下规则来隐藏移动设备的边栏：
/* This would appear just beneath the .sidebar { ... } rule */ .mobi .sidebar { display: none; }
当然，可以使用相同的浏览器检测代码来完全隐藏侧边栏标记，调整页面大小和所有爵士乐，但这只是另一种解决方法。 我只是给出了一个快速的实例，说明如何在CSS中使用层次结构中的多个类select器。
div{ padding: 5px; border: 1px solid #f00 } .class1 .class2 .class3 { background-color: #000; }
将改变最内在的div的背景：
<div class="class1"> <div class="class2"> <div class="class3"> </div> </div> </div>
换句话说，它意味着将class3应用于class3 ，该class3是class2的子class2 ，即class2的子class2 。
如果您忽略空格，则您的样式规则将应用于以下内容：
.class1.class2.class3{ background-color: #000; } <div class="class1 class2 class3"> </div>
它仍然意味着后代，如果你有嵌套的层次结构，它对类是有意义的。 例如：
.blackOnWhite .title { color:black; } .whiteOnWhite .title { color:white; }
要匹配“类”值的子集，每个值必须以任意顺序前面加“。”。
例子）：
例如，下面的规则匹配任何P元素，其“class”属性被分配了一个包含“pastoral”和“marine”的空格分隔值的列表：
p.pastoral.marine {color：green}
这个规则当class =“田园蓝色aqua海洋”匹配，但是不匹配class =“田园蓝色”。
http://www.w3.org/TR/2004/CR-CSS21-20040225/selector.html#class-html
