首页 > CSS中定义CLASS时,中间有空格和没空格的区别是什么?

CSS中定义CLASS时,中间有空格和没空格的区别是什么?

.example .pp{
  color: orange;
}
.example.pp2 {
  color: green;
}

如上面的两个定义
一个是中间有空格,一个是中间没空格。

第一个class要这样写生效:<p class="example">文字文字<span class="pp">pp这个class生效</span>....</p>
第二个class要这样写生效:<p class="example pp2">pp2这个class生效</p>

请问,这是为什么??


区别非常大大大大!

贴上案例:http://output.jsbin.com/nawuwewoku

虽然不知道为什么给踩了,请踩我的童鞋告诉我一下那里是错误的,免得误人子弟!


没任何区别,个人写法习惯罢了!!!


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

<style>
.e1.e2
{
background-color:yellow;
}
.father .e3
{
background-color:green;
}
</style>
</head>

<body>
<div class="father">
<p class="e1 e2">我住在 Duckburg。</p>
<p class="e3">我也住在 Duckburg。</p>
<div><p class="e3">他也住在 Duckburg。</p></div>
</div>
</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的直接子类,但同样变为绿色,说明这种带空格的选择器可以包含间接的后代。

你可以参考w3cschool的选择器的讲解,上面有很多例子
http://www.w3school.com.cn/cssref/css_selectors.asp
我也只是个在校学生,说的不对的尽管提


区别楼上已经说清楚啦,说一下为什么有些时候需要用多个类选择器来选择某个元素
1,css的中文翻译是层叠样式表,它的样式是基于继承和覆盖来产生最终样式的。
2,css的样式权重计算有一套规则,权重大的才是最终表示的样式,所以有些时候为了能够覆盖掉之前的样式我们通过增加一个类选择器表示这个元素来增加权重


两者有区别,有很大的区别!

.example .pp中间用空格隔开,表示后代选择器,选择的是.example内的.pp
例如:

<div class="example">
    <div class="pp">被选择的元素</div>
</div>

.example.pp选择的是class中同时包含examplepp的元素。
例如:

<div class="example pp">
被选择的元素
</div>
【热门文章】
【热门文章】