如何创建适配嵌套、兄弟元素等全场景的通用CSS基础样式表

解决方案 #

你需要的「匹配h1之后任意层级嵌套的对应元素」场景，可通过CSS选择器组合实现，且能保证优先级足够低，满足基础样式库后续拓展覆盖的需求。

先解释现有写法失效的原因 #

• h1 h3 是后代选择器，仅能匹配作为h1子/后代元素的h3，即h3要嵌套在h1标签内部才生效，和你的使用场景完全不符。
• h1 + h3 是相邻兄弟选择器，仅能匹配和h1平级、且紧跟在h1之后的h3，中间只要有任意其他标签（比如你示例里的div wrapper）就会失效，因此适配不了嵌套结构。

可行实现方案 #

方案1：后续兄弟选择器+后代组合（兼容性最好）

使用h1 ~ * h3即可实现需求，该选择器的逻辑是：匹配所有h1的后续兄弟节点的后代h3，不管中间隔了多少层div wrapper，只要h3所在的容器是h1的后续兄弟元素，就会命中规则。
同理要匹配h1之后任意层级嵌套的p标签，写h1 ~ * p即可。
示例代码：

/* 匹配h1后任意层级嵌套的h3 */
h1 ~ * h3 {
  margin-top: 2rem;
  background: green;
}
/* 匹配h1后任意层级嵌套的p */
h1 ~ * p {
  margin-top: 1rem;
}

该选择器优先级为(0,0,2)，仅由两个标签选择器组成，优先级极低，后续业务层只要使用任意类选择器（优先级0,1,0）就能轻松覆盖，完全符合基础样式库的拓展要求。

方案2：配合:has()选择器（范围更可控）

如果需要限定匹配范围，比如只匹配和h1同属一个父容器的后代元素，避免影响页面其他位置的h3，可使用现在主流浏览器已全支持的:has()选择器：

/* 匹配直接子元素包含h1的header容器内的所有h3 */
header:has(> h1) h3 {
  margin-top: 2rem;
  background: green;
}

该写法优先级同样为(0,0,2)，不会提升基础样式的优先级，不影响后续覆盖。

内容的提问来源于stack exchange，提问作者Millhorn