如何仅定位body标签下首个元素的CSS类并排除同页面同类元素

要实现这个需求，得分两种场景来看，我给你逐个拆解清楚：

场景1：仅针对的直接子元素中第一个带目标类的元素 #

如果你的目标元素是的直接子节点（不是嵌套在其他元素里），可以用CSS Selectors Level 4的nth-child(1 of ...)语法，精准选中父元素下第一个匹配指定类的直接子元素：

/* 替换 .your-target-class 为你要定位的类名 */
body > :nth-child(1 of .your-target-class) {
  color: red;
  /* 其他你需要的样式 */
}

这个选择器的好处是，哪怕的前几个直接子元素没有这个类，只要第一个带该类的直接子元素出现，就会被选中。

如果需要兼容不支持Level 4选择器的旧浏览器，可以用“先给所有匹配元素加样式，再用兄弟选择器覆盖后续元素”的技巧：

/* 给所有<body>直接子元素里的目标类加样式 */
body > .your-target-class {
  color: red;
}
/* 覆盖第一个之后的所有同类别直接子元素样式，恢复默认 */
body > .your-target-class ~ .your-target-class {
  color: inherit;
  /* 把其他样式也重置回默认值 */
}

场景2：针对下所有后代元素中第一个出现的带目标类的元素 #

如果你要找的是整个DOM树里第一个出现的带该类的元素（不管嵌套层级），可以用Level 4的:not(:has(preceding::.your-target-class))语法：

body .your-target-class:not(:has(preceding::.your-target-class)) {
  color: blue;
}

这个选择器会排除掉所有前面已经出现过同类别元素的节点，只保留第一个。

同样，旧浏览器兼容方案还是用“先统一加样式，再覆盖后续元素”：

/* 给<body>下所有目标类元素加样式 */
body .your-target-class {
  color: blue;
}
/* 覆盖第一个之后的所有同类别元素样式，包括嵌套的 */
body .your-target-class ~ .your-target-class,
body .your-target-class ~ * .your-target-class {
  color: inherit;
  /* 重置其他样式 */
}

这里要注意，兄弟选择器~只能选中同级的后续元素，所以还要加上~ * .your-target-class来覆盖嵌套在后续同级元素里的目标类元素。

小提示 #

• 如果你确定的第一个子元素就是带目标类的，那直接用body > .your-target-class:first-child就够了，写法最简单。
• 测试的时候记得多验证几种DOM结构，比如目标类元素前面有其他不同类的元素、嵌套在其他元素里的情况，确保样式只作用在你想要的第一个元素上。

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