CSS后续兄弟选择器使用异常：p与h3组合无法生效求解析

你遇到的问题本质是HTML规范里的元素嵌套限制，浏览器自动修正了不符合规范的DOM结构，导致你的CSS选择器行为和预期不一致。

1. 为什么<p>里放<h3>会出问题？ #

HTML规范明确规定：<p>元素属于短语内容容器，它只能包含行内元素（比如<span>、<a>），不能包含块级元素（比如<h1>-<h6>、<div>、<p>本身）。

当浏览器解析你的代码时，看到<p>里面出现了块级元素<h3>，会自动进行「纠错处理」：它会先把前面的<p>闭合，然后渲染<h3>，最后忽略掉后面的</p>（因为前面已经闭合过<p>了）。

所以你写的代码实际被浏览器解析成了这样的DOM结构：

<p>here comes a paragraph </p>
<h3>child of p, thus should not be underlined</h3>
<h3>has the same parent with p, thus should be underlined</h3>

这时候两个<h3>都是<p>的后续兄弟元素，所以都会被p ~ h3这个选择器选中，全部加上下划线，和你预期的「只有第二个h3下划线」不符。

2. 为什么换成<div>或<a>就正常？ #

• 对于<div>：它是通用块级容器，HTML规范允许它包含任何元素（包括其他块级元素），所以浏览器不会修改你写的嵌套结构，第一个<h3>确实是<div>的子元素，不是<div>的兄弟，自然不会被div ~ h3选中。
• 对于<a>：HTML5规范允许<a>元素包含除了其他<a>之外的任何元素（包括块级元素），所以嵌套<h3>是合法的，浏览器会保留你写的结构，第一个<h3>作为<a>的子元素，不会被a ~ h3选中，只有第二个<h3>是<a>的兄弟，会被选中。

总结 #

如果想实现你预期的效果，要么把<p>换成允许嵌套块级元素的容器（比如<div>），要么把<h3>换成行内元素（如果符合你的需求），或者调整HTML结构，不要在<p>里放块级元素。

内容的提问来源于stack exchange，提问作者I'm in deep