CSS属性包含选择器与:first-child组合使用失效问题求助

你的选择器 p[id*="taco"]:first-child 失效的核心逻辑是：:first-child 要求目标元素同时满足两个条件——既是 <p> 标签且 id 包含 taco，又是其父元素的第一个子元素。但在你的HTML里，第一个带 id*="taco" 的 <p> 是 <body> 的第5个子元素，并非第一个子元素，因此选择器无法匹配到任何元素。

如果需求是选中整个页面中第一个符合 p[id*="taco"] 条件的元素，可以用以下两种方法：

方法一：相邻兄弟选择器覆盖样式（兼容性最优） #

这种方法支持所有现代浏览器，逻辑简单直接：

/* 先给所有符合条件的p设置黄色背景 */
p[id*="taco"] {
  background-color: yellow;
}
/* 给第一个符合条件的p之后的所有同条件p重置背景为默认 */
p[id*="taco"] ~ p[id*="taco"] {
  background-color: transparent;
}

原理是先统一设置所有目标元素的样式，再通过 ~ 选择器选中第一个目标元素之后的同类型元素，重置它们的样式，最终只有第一个目标元素保留黄色背景。

方法二：:has() 伪类（现代浏览器支持） #

如果只需支持较新的浏览器，可以用 :has() 伪类直接定位第一个目标元素：

body > p[id*="taco"]:not(:has(~ p[id*="taco"])) {
  background-color: yellow;
}

原理是选中 <body> 下带 taco 的 <p>，且该元素后面没有其他带 taco 的 <p>，这样就只会匹配第一个符合条件的元素。

<!DOCTYPE html>
<html>
<head>
<style>
p[id*="taco"] {
  background-color: yellow;
}
p[id*="taco"] ~ p[id*="taco"] {
  background-color: transparent;
}
</style>
</head>
<body>

<p>此段落是其父元素（body）的第一个子元素。</p>
<p>此段落不是其父元素（body）的第一个子元素。</p>
<p>此段落是其父元素（div）的第一个子元素。</p>
<p>此段落不是其父元素（div）的第一个子元素。</p>
<p id="taco">此段落是其父元素（body）的第一个子元素。</p>
<p id="taco">此段落不是其父元素（body）的第一个子元素。</p>
<p id="taco">此段落是其父元素（div）的第一个子元素。</p>
<p id="taco">此段落不是其父元素（div）的第一个子元素。</p>

</body>
</html>

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