CSS 选择器中的多个类

时间:2022-11-29
本文介绍了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模板网!

上一篇:CSS nth-child 表示大于和小于 下一篇:如何选择作为给定元素的子元素的多个元素?

相关文章

最新文章