首先提起，html中有三种节点，元素节点、属性节点、文本节点。
对，就是你想的那样的一一对应，是个节点树，有孩子有兄弟有唯一的一个父母。
CSS 中有四种不同的组合器：
- 后代选择器 (空格)
- 子选择器 (>)
- 相邻兄弟选择器 (+)
- 通用兄弟选择器 (~)
- 后代选择器 (空格)：后代选择器匹配作为指定元素后代的所有元素
di*** background-color: yellow;
}
div的所有后代中所有的p元素节点
不局限于孩子，孩子的孩子的孩子...都包含！
是所有后代嗷！
- 子选择器 (>)：子选择器匹配属于指定元素子元素的所有元素。
di*** background-color: yellow;
}
<div>
<p>div 中的段落 1。</p>
<p>div 中的段落 2。</p>
<section><p>div 中的段落 3。</p></section> <!-- 非子但属后代 -->
<p>div 中的段落 4。</p>
</div>
<!-- 也就是！只有孩子。孩子的孩子不行！ -->
- 相邻兄弟选择器 (+)：紧随其后的兄弟节点
di*** background-color: yellow;
}
<div>
<p>div 中的段落 1。</p>
<p>div 中的段落 2。</p>
</div>
<p>段落 3。不在 div 中。</p> <!-- 只有这个有哦 -->
<p>段落 4。不在 div 中。</p>
<!-- 紧随div的兄弟节点p，没有其他的了，就一个 -->
- 通用兄弟选择器 (~) 有点复杂，认真看！
<style>
di*** background-color: yellow;
}
</style>
<body>
<p>段落 1。</p> <!-- 没有这个，不在后面 -->
<div>
<p>段落 2。</p> <!-- 没有这个，不是兄弟 -->
</div>
<p>段落 3。</p> <!-- 有这个 -->
<code>一些代码。</code>
<p>段落 4。</p> <!-- 有这个 -->
</body>
<!--关键词： 在div后面的，与div同级的，找p
即，在div后面的是p的兄弟节点， -->
注意:格式我写的很随便，理解意思就行了好吗。
总结：
京公网安备 11010502036488号