老师 为啥我写的h2标签没变色
来源：2-11 复合选择器
帅哥但自卑
2021-04-01 14:12:34
<style>
p.xxs h2{
color: blue;
}
</style>
</head>
<body>
<div class="xxs">
<p>李培森好帅啊</p>
<h2>李培森不会变色</h2>
</div>
<p class="xxs">
李培森好帅啊
<h2>李培森不会变色</h2>
</p>
</body>
</html>
2回答
-
好帮手慕言
2021-05-13
“cloudonthesun”同学你好，解答如下：
1、第一张图中div标签是有两个类名，第一个类名为xxs，第二个类名为p，两个类名之间使用空格分隔。
2、 .p.xxs是选择既有类名p，也有类名xxs的元素，同学的代码也可以让第二个h2标签里的文字变色，代码具有灵活性，不管使用哪种方式，能够实现效果就可以。
祝学习愉快~
0 -
好帮手慕言
2021-04-01
同学你好，p标签里面不能嵌套块标签，否则解析会有问题，以同学的代码为例，会解析成如下结构：
h2没有在p标签里面，所以蓝色不能生效，如果想让第二个h2标签字体颜色变为蓝色，建议：可以把p标签改为div标签，类名设置成p，选择器再修改一下：
效果：
代码：
<!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;
} */
.p.xxs h2 {
color: blue;
}
</style>
</head>
<body>
<div class="xxs">
<p>李培森好帅啊</p>
<h2>李培森不会变色</h2>
</div>
<!-- <p class="xxs">
李培森好帅啊
<h2>李培森不会变色</h2>
</p> -->
<div class="xxs p">
李培森好帅啊
<h2>李培森不会变色</h2>
</div>
</body>
</html>祝学习愉快~
0hp>
老师，请问下上面的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>
<!-- <p class="xxs">
李培森好帅啊
<h2>李培森不会变色</h2>
</p> -->
<div class="xxs1">
李培森好帅啊
<h2>李培森不会变色</h2>
</div>
</body>
</html>
h021-05-13
相似问题