p标签里面的内容不变成红色

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>css3选择器</title>
<style>
/*补充代码*/
div+p{
    color:red;
}
</style>
</head>
<body>
<!-- 补充代码 -->
<div>
    我是第一个div
<p>我是第一个p，我要变成红色</p>
<p>我是第二个p</p>
</div>
<div>
    我是第二个div
    <p>我是第三个p，我要变成红色</p>
    <p>我是第四个p</p>
    <p>我是第五个p</p>
</div>
</body>
</html>

慕虎2042770 2025-03-20

源自：CSS3选择器 3-3 编程练习

收起

1回答

好帮手慕小李 2025-03-20 16:57:10

同学你好，先不要着急，首先使用相邻兄弟选择器这个肯定是ok的，但咱们先来看看这道题：

使用相邻兄弟选择器，为两个div后面的p标签设置红色字体颜色。

那么根据任务要求，我们来看看同学的html结构。

同学这么写是属于嵌套的写法，那么根据题目任务来说使用相邻选择器，就不太符合了。

如下，结构仅供参考：

将嵌套的p标签挪到div后面，变成“相邻兄弟”最终的效果如下：

同学看看，祝学习愉快！

收起回答

提问者慕虎2042770 #1

嵌套写法不能使用相邻兄弟选择器是因为是父子级关系吗？

2025-03-20 17:38:35
好帮手慕小李回复提问者慕虎2042770 #2

理解的是对的。嵌套的写法就是“父子关系”了，相邻兄弟不能是嵌套。
但也可以按照嵌套的方式满足需求，如下需要单独在处理一下其他p标签：

2025-03-21 09:14:13