关于css选择器语法的疑问。

新人，准大学狗。打算暑假先自学一下前端技术。
在学习CSS的时候遇到一些疑问。
代码如下：
<html>

<head>
    <title>TEST</title>
    <style type="text/css">
        #HHH #shit.stronggg{color:red;} /*疑问在这一行*/
        .MainDIV .Fxxk1{color:blue;}
    </style>
</head>

<body>
    <div class="MainDIV">
        <p class="Fxxk1">第一段测试文字</p>
        <p class="Fuck1">第二段<strong>测试文字</strong></p>
    </div>
    <div id="HHH">
        <p id="shit"><strong class="stronggg">shit</strong></p>
    </div>
</body>

</html>

无视这些尴尬的ID和类（捂脸）。
出现疑问的位置已经用注释标记好，为什么#shit后面的.stronggg不能用空格隔开呢？如果把那一行改成#HHH .stronggg，又需要添加一个空格。
我有点迷糊了。
希望大神不要嘲笑小弟的无知，给出一点指点意见。谢谢。

css html

阅读 2.9k

4 个回答

得票最新

北冥小鱼

291

发布于
2017-07-04

✓ 已被采纳

连在一起表示id=shit且class=stronggg, 隔开表示id=shit 下边的 class=stronggg

maybe_009

643

发布于
2017-07-04

更新于
2017-07-04

首先不要用strong这种被淘汰的标签；
其次你想给.stonggg添加样式，建议看看css选择器的几种类型；
空格表示在子元素中匹配而连在一起写表示同一个组件的选择；

你的疑问

#HHH #shit.stronggg 

    <div id="HHH">
        <p id="shit" class="stronggg"><strong >shit</strong></p>
    </div>
  
 #HHH #shit .stronggg

    <div id="HHH">
        <p id="shit"><strong class="stronggg">shit</strong></p>
    </div>

还没用过id加class一起选元素的方式，总觉得好奇怪。