CSS 选择器中的多个类答案

【问题标题】：Multiple classes in CSS SelectorCSS 选择器中的多个类
【发布时间】：2011-05-20 10:09:44
【问题描述】：

我看到这样的选择器，

.class1 .class2 .class3 {
}

这是什么意思？

我使用了多个没有空格的类选择器。空格表示后代，但对类没有意义。

【问题讨论】：

因为文档中使用的类没有任何层次结构，所以这个后代规则会弄乱页面的一部分。我更改了规则以使用 ID 和类型来识别特殊层次结构，它现在可以工作了。

标签： css css-selectors

【解决方案1】：

它仍然意味着后代，如果您有嵌套的层次结构，它对类确实有意义。例如：

.blackOnWhite .title {
    color:black;
}

.whiteOnWhite .title {
    color:white;
}

【讨论】：

他问的是什么不同的东西？？
@gov @01001111 显示的是一个示例，说明何时有充分的理由使用文档的层次结构来选择相同的类并提供不同的样式。 （当然，现实中没有人会这么傻到name their CSS classes based on the intended styling。）

【解决方案2】：

要匹配“类”值的子集，每个值前面必须有一个“.”，以任何顺序。

示例：

例如下面的规则匹配任何“类”的 P 元素属性已被分配一个列表空格分隔的值，包括 “田园”和“海洋”：

p.pastoral.marine { 颜色：绿色 }

当 class="pastoral 蓝色水色海洋”但不匹配为 class="田园蓝"。

http://www.w3.org/TR/2004/CR-CSS21-20040225/selector.html#class-html

【讨论】：

即使您没有回答原始问题，我也喜欢您的回答，因为您链接并引用了我实际寻找的答案。所以，谢谢你写它！ :-D

【解决方案3】：

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>

http://jsfiddle.net/C7QZM/

换句话说，这意味着为class3 应用样式，它是class2 的子代，class2 是class1 的子代。

如果您忽略空格，您的样式规则将适用于以下内容：

.class1.class2.class3{
   background-color: #000;
}
<div class="class1 class2 class3">
</div>

http://jsfiddle.net/C7QZM/1/

【讨论】：

必须是小孩子，去试试吧。要实现所有 3 类行为，您需要使用 .class1.class2.class3 构造，不带空格。
@negative 如果您想为 class1 或 class2 或 class3 提供唯一值怎么办？
如果想为所有 div 赋予相同的背景色，为什么不直接为父 div 提供相同的背景色？？？
@gov 为独特的值赋予独特的物品样式：.class1{background-color:#333;} .class2{background-color:#666;} .class3{background-color:#999;}。 @gov 如果您想为所有 div 赋予相同的 bg 颜色，这就是您通常会做的事情，实际上我从未在实践中遇到过这种构造，但可能在某些情况下您会需要它。
@negative ，现在知道了，如果您在三个中有任何共同属性，我们可以将它们分组，而不是重复代码。

【解决方案4】：

假设有一个带有以下标记的页面，

<div class="class1">
  <div class="class2">
    <div class="class3">
      Some page element(s).
    </div>
  </div>
</div>

您提供的 CSS 将为 class3 下的所有元素设置样式，这些元素在 class2 下，在 class1 下。

即假设这是样式，

.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>

它可以工作并将文本呈现为红色。

注意：

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

【讨论】：

如果确实如此，则无法弄清楚适用哪些规则，因为这些类未在 HTML 的层次结构中使用。
@ZZ Coder - 确实有可能找出适用的规则：浏览器开始从父级应用规则，如果它们不同，则用子规则覆盖它们
@Amit G：在你的代码中，我可以知道，另外两个
标签在哪里。我刚问过。。谢谢。。

@saina 嘿 Saina，不知道你指的是什么 div 标签，你能澄清一下你到底想做什么吗？

【解决方案5】：

其他答案为您提供所需的解释；我将提供一个实际用例来满足任何人的好奇心。

由后代组合符分隔的多个类选择器的常见实际用例是，当网站对某些页面或某些设备具有不同的主体类时。

例如，考虑这个简单网站的标记。除了页眉和页脚，它还有一个内容栏和两个侧边栏：

<!-- 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>

默认设置可能是在.sidebars 之间安排#content，完成了一些我不会在这里讨论的浮动技巧。

在移动设备上，除了为小分辨率调整整体大小外，设计师可能还想取消侧边栏以回收一些水平屏幕空间。除了媒体查询之外，还有更简单的选择，即使用服务器端代码检测移动浏览器并相应地使用类标记body，如下所示（ASP.NET C# 示例）：

<% if (((HttpCapabilitiesBase) Request.Browser).IsMobileDevice) { %>
<body class="mobi">
<% } else { %>
<body>
<% } %>

这就是您的示例派上用场的地方。设计者只是使用以下规则来隐藏移动设备的侧边栏：

/* This would appear just beneath the .sidebar { ... } rule */

.mobi .sidebar {
    display: none;
}

当然，可以使用相同的浏览器检测代码完全隐藏侧边栏标记，减少页面大小和所有爵士乐，但这只是解决此问题的另一种方式。我只是给出一个快速的实际示例，说明如何在 CSS 中使用层次结构中的多个类选择器。

【讨论】：