CSS中定义CLASS时,中间有空格和每空格的区别

css选择器的格式,规定不带空格的选择条件之间是“且”关系,带空格的是“父子”关系,并且可以是非直接的“父子”关系

 1 <style>
 2 .e1.e2
 3 {
 4 background-color:yellow;
 5 }
 6 .father .e3
 7 {
 8 background-color:green;
 9 }
10 </style>
11 </head>
12 
13 <body>
14 <div class="father">
15 <p class="e1 e2">我住在 Duckburg。</p>
16 <p class="e3">我也住在 Duckburg。</p>
17 <div><p class="e3">他也住在 Duckburg。</p></div>
18 </div>
19 </body>

上面的代码中第一个段落p有两个class,e1和e2,注意,class属性的空格和css的空格不一个意思的,class属性的空格是“且”的关系,而刚说的css的空格是“父代与后代”的关系。

第一个p被渲染为了黄色,是因为css用了.e1.e2的选择器给他设定了这个颜色,就是这个段落同时有这两个类。当然,css里面不用.e1.e2只用.e1也可以实现同样的效果,不过有些时候我们不希望css选择器误命中其它的标签,就这么细写了。

第二p被.father .e3渲染为了绿色,是因为这p的class是e3,而且是class为father的标签的后代,所以被染为绿色。

同理,第三个p,虽然不是father的直接子类,但同样变为绿色,说明这种带空格的选择器可以包含间接的后代。

posted @ 2016-03-31 18:46  十二分努力  阅读(2832)  评论(0编辑  收藏  举报