老师为啥我写的h2标签没变色

<style>

p.xxs h2{

color: blue;

}

</style>

</head>

<body>

<p>李培森好帅啊</p>

<h2>李培森不会变色</h2>

</div>

李培森好帅啊

<h2>李培森不会变色</h2>

</p>

</body>

</html>

帅哥但自卑 2021-04-01

源自：CSS3选择器 2-11 复合选择器

收起

2回答

好帮手慕言 2021-05-13 13:45:03

“cloudonthesun”同学你好，解答如下：

1、第一张图中div标签是有两个类名，第一个类名为xxs，第二个类名为p，两个类名之间使用空格分隔。

2、 .p.xxs是选择既有类名p，也有类名xxs的元素，同学的代码也可以让第二个h2标签里的文字变色，代码具有灵活性，不管使用哪种方式，能够实现效果就可以。

祝学习愉快~

收起回答

好帮手慕言 2021-04-01 14:55:33

同学你好，p标签里面不能嵌套块标签，否则解析会有问题，以同学的代码为例，会解析成如下结构：

h2没有在p标签里面，所以蓝色不能生效，如果想让第二个h2标签字体颜色变为蓝色，建议：可以把p标签改为div标签，类名设置成p，选择器再修改一下：

效果：

代码：

<!DOCTYPE html><br><html lang="en"><br><br><head><br> <meta charset="UTF-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>Document</title><br> <style><br> /* p.xxs h2 {<br> color: blue;<br> } */<br><br> .p.xxs h2 {<br> color: blue;<br> }<br> </style><br></head><br><br><body><br> <div class="xxs"><br> <p>李培森好帅啊</p><br> <h2>李培森不会变色</h2><br> </div><br>

<!-- <p class="xxs"><br>        李培森好帅啊<br>        <h2>李培森不会变色</h2><br>    </p> -->

<br> <div class="xxs p"><br> 李培森好帅啊<br> <h2>李培森不会变色</h2><br> </div><br></body><br><br></html><br>

祝学习愉快~

收起回答

cloudonthesun #1

老师，请问下上面的class类名可以含有空格吗？？还有下面的选择器为什么会是.p.xxs??
我是按照下面的写法也实现了相同的效果，但是不太理解老师为什么那样写
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* p.xxs h2 {
            color: blue;
        } */

        div.xxs1 h2 {
            color: blue;
        }
    </style>
</head>

<body>
    <div class="xxs">
        <p>李培森好帅啊</p>
        <h2>李培森不会变色</h2>
    </div>
    
    <div class="xxs1">
        李培森好帅啊
        <h2>李培森不会变色</h2>
    </div>
</body>

</html>

2021-05-13 11:03:49