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>

请问，这是为什么？？

css

阅读 28.3k

5 个回答

区别非常大大大大！

.example .pp = E F 是后代选择器。
.example.pp2 则是在一个元素上，这个元素包括这两个类才会有效果。

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

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

叉叉哥

3.8k63344

发布于
2015-10-20

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

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

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

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

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

th_nightmare

361

发布于
2015-10-20

更新于
2015-10-20

这是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
我也只是个在校学生，说的不对的尽管提

查看全部 5 个回答

推荐问题

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

如何自定义设置虚线边框的样式？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

为什么这个动画一直在抖动?

怎么把一个矩形div变成一个直角三角形？

如何实现前端视频流的处理和优化？

通栏banner图片，如何不变形且内容完全显示不裁剪啊？

我看到很多网站，都会对CSS初始化：`margin: 0; padding: 0;` ，目的是什么呢？

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

如何自定义设置虚线边框的样式？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

为什么这个动画一直在抖动?

怎么把一个矩形div变成一个直角三角形？

如何实现 前端视频流的处理 和优化？

通栏banner图片，如何不变形且内容完全显示不裁剪啊？

我看到很多网站，都会对CSS初始化：`margin: 0; padding: 0;` ，目的是什么呢？

如何实现前端视频流的处理和优化？