在div列表中按类名选择第一个元素（仅限css）[重复]答案

【问题标题】：Select first element by Classname in list of div's (css only) [duplicate]在div列表中按类名选择第一个元素（仅限css）[重复]
【发布时间】：2019-06-19 09:39:55
【问题描述】：

我希望仅在具有相同 HTML 元素（在本例中为 div）的列表中使用 CSS 仅在两种情况下都能够定位“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>

【问题讨论】：

请查看stackoverflow.com/questions/2717480/…

标签： css pseudo-element

【解决方案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 的元素，它将起作用。

【讨论】：