问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
uu_snow
    17762732
    .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 个回答
    得票最新
    头像
    _我已经从中二毕业了
      7.9k72131

      区别非常大大大大！

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

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

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

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

      头像
      叉叉哥
        3.8k63344

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

        .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

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

          头像
          wangfulin
            6.1k1513

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

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题
            宣传栏