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 做的最接近的事情是选择具有给定属性的所有元素，然后覆盖具有该属性的所有后续元素所应用的样式。

为此，您可以使用通用同级组合器~以及属性选择器。

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

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 */
}