如何选择首个非script标签的普通兄弟元素？两种选择器尝试未果

嘿，旧代码库这种不可控的结构确实让人头大！我来帮你梳理下问题和解决办法：

为什么你之前的选择器不生效？ #

• 关于 header ~ :not(script):first-of-type：
  这个选择器会选中所有非script类型元素里各自的第一个同类型兄弟，比如header后面如果有<script>、<p>、<div>，它会同时选中第一个<p>和第一个<div>，而不是你要的“第一个出现的非script元素”。
• 关于 header ~ :not(script):first-child：
  :first-child是匹配父元素的第一个子元素，但这个元素同时得是header的兄弟，这显然不可能（因为header已经是父元素的子元素之一，排在它前面的话就不是header的兄弟了），所以自然选不到任何元素。

有效的解决方案 #

情况1：header的直接下一个兄弟就是非script元素 #

如果确定header后面第一个兄弟就不是script，用相邻兄弟选择器+最直接：

header + :not(script)

情况2：header后面可能有多个script，要找第一个出现的非script元素 #

这是更通用的场景，用这个组合选择器就能精准定位：

header ~ :not(script):not(header ~ :not(script) ~ :not(script))

原理说明：

• header ~ :not(script) 先选中header所有非script的兄弟元素
• :not(header ~ :not(script) ~ :not(script)) 再排除掉那些前面已经有其他非script兄弟的元素，剩下的就是第一个出现的那个非script元素

举个实际HTML的例子：

<header>页面头部</header>
<script>/* 初始化脚本 */</script>
<script>/* 统计脚本 */</script>
<section>我是第一个非script元素</section>
<article>其他内容</article>

上面的选择器会精准选中<section>元素。

可选方案（依赖现代浏览器支持） #

如果你的项目不需要兼容旧浏览器，CSS的:has()选择器能让代码更简洁：

header ~ :not(script):first-of-type:not(header:has(+ :not(script)) ~ :not(script))

不过这种写法还是不如前面的通用选择器灵活，毕竟旧代码库的script数量可能随时变化。

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