css - 在 div 列表中按类名选择第一个元素（仅限 css）

Question

我希望能够仅在这两种情况下使用 CSS 仅在具有相同 HTML 元素（在本例中为 div）的列表中定位“lorem”。因此，当我从列表中删除 ID 时，它仍然应该只使用类“items__item”设置第一个元素的样式。有人有想法吗？

.items {
  display: flex;
  flex-direction: row;
  margin: 10px;
}
.items > div {
  padding: 0 5px;
}

.items__item:first-child {
  color: green;
}

.items__item:first-of-type {
  color: green;
}

.items__item:nth-of-type(2) {
  color: red;
}

<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>

Answer 1

.items {
  display: flex;
  flex-direction: row;
  margin: 10px;
}
.items > div {
  padding: 0 5px;
}

.items div.items__item ~ div.items__item  {
  color: black;
}

.items div.items__item {
  color: red;
}

<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>

现在，如果您删除具有类 id 的元素，它将起作用。