Question

我试图选择具有特定属性的第一个孩子（aria-hidden =＆＃34; false＆＃34;）并且有一些奇怪的行为 - 看起来属性选择器正在被忽略 - 当属性动态变化（通过javascript）时它变得更奇怪

<ul>
  <li aria-hidden="true"><p class=""><a href=""><span>1</span></a></p></li>
  <li id="id" aria-hidden="false"><p class=""><a href=""><span>2</span></a></p></li>
  <li aria-hidden="false"><p class=""><a href=""><span>3</span></a></p></li>
  <li aria-hidden="false"><p class=""><a href=""><span>4</span></a></p></li>
</ul>

和CSS：

ul li[aria-hidden=false]:nth-child(1) a {
  color: #00FF00;
  font-size: 30px;
}
ul li[aria-hidden=false]:nth-child(2) a {
  color: #FF0000;
  font-size: 30px;
}
ul li[aria-hidden=false]:first-child a {
  background-color: #0000ff;
}

请参阅filddle： http://jsfiddle.net/11sd2r24/5/

你知道如何先选择＆＃34; li＆＃34;将aria-hidden属性设置为false

Answer 1

:nth-child选择器统计同一级别的所有元素，不仅匹配的元素。

我知道选择第n个匹配元素的唯一方法是:nth-match，但~~＆＃39; s~~ 是part of a CSS4 draft，但removed afterwards和{ {3}}

<强>更新

对于简单的用例，您可以使用+组合器获得类似的结果。

例如，您可以通过以下方式将样式应用于第二个匹配项：

/* style each matching one after the first */
ul li[aria-hidden=false] + li[aria-hidden=false] a {
  color: red;
  font-size: 30px;
}
/* revert for each one after the second */
ul li[aria-hidden=false] + li[aria-hidden=false] + li[aria-hidden=false] a {
  color: inherit;
  font-size: inherit;
}

:nth-child empowered

具有动态源奇怪行为的CSS属性+伪元素

1 个答案: