javascript - 具有动态源异常行为的 CSS 属性 + 伪元素

Question

我正在尝试选择具有特定属性的第一个 child (aria-hidden="false")并且有一些奇怪的行为 - 看起来属性选择器被忽略了 - 当属性动态变化时(通过 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;
}

请看 fiddle : http://jsfiddle.net/11sd2r24/5/

你知道如何选择 aria-hidden 属性设置为 false 的第一个“li”吗

Answer 1

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

我知道选择第 n 个匹配元素的唯一方法是 :nth-match，但是 的 是 part of a CSS4 draft , 但是 removed afterwards和 :nth-child empowered .

更新:

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

例如，您可以通过以下方式将样式应用到恰好第二个匹配项:

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

Your updated JSFiddle