为何<p>标签下CSS兄弟选择器会作用于无共同父级元素？
2026-7-21
为什么
标签下的子div会被CSS兄弟选择器(~)选中？
核心原因是HTML的解析规则限制：
标签属于「短语内容容器」，它的内部只能放行内元素，不能嵌套块级元素（比如
）。当浏览器看到
标签里出现
时，会自动提前闭合
标签，把
直接放到
外面，原本的嵌套结构被拆成了兄弟结构。
举个例子，你写的原HTML代码：
<div>Блок 1</div> <p> <div>Child Block 1</div> </p>
浏览器实际解析后的DOM结构会变成这样：
<div>Блок 1</div> <p></p> <div>Child Block 1</div> <!-- 后面的</p>会被浏览器忽略，因为p已经提前闭合了 -->
这时候两个
就成了拥有共同父级的兄弟元素，
div~div选择器自然会匹配第二个，让它的文字变红。标签属于「流内容容器」，它允许嵌套块级元素，浏览器不会拆解结构，所以内部的
而
还是的子元素，和外面的
没有兄弟关系，也就不会被
div~div选中。内容的提问来源于stack exchange，提问作者Kolenbass
相关产品推荐
相关产品推荐
