CSS如何选择紧跟在另一元素之后的首个非子级元素

你需要的是CSS内置的相邻兄弟选择器，语法为+，该选择器的匹配规则完全符合你的需求：仅选中和指定元素同级、且紧接在该元素后方的第一个目标元素，不会匹配被其他元素隔开的同级元素，也不会匹配作为指定元素子级的元素。

具体实现代码如下：

/* 匹配所有h1~h6后紧跟的第一个同级p元素 */
h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
  text-indent: 2em;
}

补充说明 #

• 不要和通用兄弟选择器~混淆：h1 ~ p会选中h1之后所有同级的p元素，而+仅选中紧跟的第一个，符合你的需求。
• 该选择器兼容性极佳，所有现代浏览器及IE7及以上版本均支持，无需额外适配，也不需要你手动给元素加类名实现匹配。

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