Question

我尝试过：第一个孩子：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>

我如何选择第一个和最后一个＆＃34;数据选择＆＃34;无论父容器如何都找到？

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

＆＃13;

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

＆＃13;

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

＆＃13;

CSS选择找到属性的第一个元素

1 个答案: