CSS选择具有属性的第一个元素[重复]

Question

我尝试过 :first-child :nth-of-type 和其他一些方法来选择不基于子父级的第一个和最后一个元素。

使用 CSS，无论如何我都想选择具有特定属性的第一个和最后一个元素。

<div>
   <div></div>
   <div></div>
   <div data-select></div> 
   <div></div>
   <div></div> 
   <div></div>
   <div></div> 
   <div data-select></div>
   <div></div> 
   <div></div>
   <div data-select></div> 
<div>

如何选择找到的第一个和最后一个“数据选择”元素，而不管其父容器如何？

Answer 1

由于:nth-child只看子元素的索引，:nth-of-type只看子元素的类型和索引，所以目前没有直接选择第一个元素的方法具有给定的属性。

不幸的是，使用纯 CSS 可以做的最接近的事情是选择具有该给定属性的所有元素，然后覆盖具有该属性的所有后续元素应用的样式。

为此，您可以使用general sibling combinator, ~ 和attribute selector。

div > div[data-select] {
  border-color: #f00;
}
div > div[data-select] ~ [data-select] {
  border-color: #000; /* Revert back to initial styling */
}

div > div {
  height: 1em;
  border: 2px solid #000;
  margin: 0.4em;
}

div > div[data-select] {
  border-color: #f00;
}
div > div[data-select] ~ [data-select] {
  border-color: #000; /* Revert back to initial styling */
}

<div>
   <div></div>
   <div></div>
   <div data-select>Select this</div> 
   <div></div>
   <div></div> 
   <div></div>
   <div></div> 
   <div data-select></div>
   <div></div> 
   <div></div>
   <div data-select></div> 
<div>