在css定义CLASS时中间有空格和没空格的区别？

程序员文章站 2022-04-06 20:01:07

...

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

请问，这是为什么？？

.example .pp = E F 是后代选择器。

.example.pp2 则是在一个元素上，这个元素包括这两个类才会有效果。

两者有区别，有很大的区别！

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

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

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

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

这是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的直接子类，但同样变为绿色，说明这种带空格的选择器可以包含间接的后代。

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

以上就是在css定义CLASS时中间有空格和没空格的区别？的详细内容，更多请关注其它相关文章！