CSS 选择器中的多个类

问题描述

我看到这样的选择器，

.class1 .class2 .class3 {
}

这是什么意思?

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

I've used multiple class selectors without spaces. Space means descendant but it doesn't make sense for classes.

推荐答案

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

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>

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

The CSS you provided would style all elements under class3, which are under class2, which are under class1.

即假设这是样式，

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

如果标记如下，

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

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

It would work and render the text in red.

注意:<IE7 可能有上述问题...

http://www.thunderguy.com/分号/2005/05/16/multiple-class-selectors-in-internet-explorer/http://www.w3.org/TR/2004/CR-CSS21-20040225/selector.html#class-html

这篇关于CSS 选择器中的多个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！