如何仅用CSS选中列表中首个class为items__item的元素？

你遇到的问题核心在于，:first-child和:first-of-type都受限于元素在父容器中的位置或类型，没法忽略.id这类无关前置元素。这里有两种可靠方案，能不管前面有没有额外元素，都精准命中内容为lorem的第一个.items__item：

方案一：利用:not()排除后续元素（现代浏览器首选） #

.items__item:not(.items__item ~ .items__item) {
  color: green;
}

原理拆解 #

• .items__item ~ .items__item 会选中所有在另一个.items__item之后的同类别元素
• 搭配:not()后，就会排除这些后续元素，只留下第一个出现的.items__item——不管它前面有没有.id或其他非目标类的div，只要是第一个出现的该类元素就会被选中。

方案二：先统一设置再覆盖（兼容老旧浏览器） #

如果需要兼容IE11这类不支持复杂:not()组合的浏览器，可以用这个思路：

/* 先给所有.items__item设置目标样式 */
.items__item {
  color: green;
}
/* 再用兄弟选择器覆盖后续元素的样式 */
.items__item ~ .items__item {
  color: #333; /* 恢复默认颜色 */
}

这个方法逻辑更直白，兼容性拉满，效果和方案一完全一致。

完整可运行代码示例 #

.items { 
  display: flex; 
  flex-direction: row; 
  margin: 10px; 
}
.items > div { 
  padding: 0 5px; 
}
/* 核心选择器（二选一即可） */
.items__item:not(.items__item ~ .items__item) {
  color: green;
}
/* 可选：给其他元素设置样式区分 */
.divider {
  color: #999;
}

<div class="items">
  <div class="id">23432</div>
  <div class="items__item">lorem</div>
  <div class="items__item">ipsum</div>
  <div class="divider">|</div>
  <div class="items__item">dolor</div>
</div>
<div class="items">
  <div class="items__item">lorem</div>
  <div class="items__item">ipsum</div>
  <div class="divider">|</div>
  <div class="items__item">dolor</div>
</div>

内容的提问来源于stack exchange，提问作者Nick De Jaeger