Question

我看到一个这样的选择器，

.class1 .class2 .class3 {
}

这是什么意思？

我使用了多个没有空格的类选择器。空间意味着后代，但对于课程没有意义。

Answer 1

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

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

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

注意：＆lt; 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

Answer 2

其他答案为您提供所需的解释;我会用一个实际的用例来填充任何人的好奇心。

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

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

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

默认设置可能是在#content之间安排.sidebar，完成一些我不会到达的浮动技巧。

在移动设备上，除了为小分辨率重新调整整个内容之外，设计师也许想要取消侧边栏来回收一些水平屏幕。除了媒体查询之外，还有一个更简单的选项，可以使用服务器端代码来检测移动浏览器，并相应地使用类标记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中使用层次结构中的多个类选择器。

Answer 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是class1的孩子，.class1.class2.class3{ background-color: #000; } <div class="class1 class2 class3"> </div>的孩子。

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

{{1}}

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

Answer 4

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

.blackOnWhite .title {
    color:black;
}

.whiteOnWhite .title {
    color:white;
}

Answer 5

要匹配“class”值的子集，每个值必须以“。”开头，   以任何顺序。

实施例（一个或多个）：

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

p.pastoral.marine {color：green}

当class =“pastoral时，此规则匹配   蓝色水色海洋“但不匹配   对于class =“田园蓝”。

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

CSS Selector中的多个类

5 个答案: