CSS选择器中有多个类 [英] Multiple classes in CSS Selector

查看：218 发布时间：2017/2/4 21:51:36 css css-selectors

本文介绍了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.

ie让我们说这是样式，

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

编辑：如果标记改为，

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

它会工作并以红色呈现文本。

It would work and render the text in red.

注意： IE7可能存在上述问题...

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

查看全文