如何仅使用 CSS 选择器根据该项目的子属性来选择列表中的第 n 个项目

Question

所以如果我有一个这样的列表：

<ul>
 <li><button disabled/></li>
 <li><button disabled/></li>
 <li><button /></li>
 <li><button /></li>
 <li><button /></li>
</ul>

并且禁用按钮的数量永远不知道 - 但将始终是连续的并出现在启用按钮之前，如何选择第二个启用按钮？

现在我有：

• “ul li:nth-of-type(2) button:not([disabled])”

但这只会选择第二个

<li>

，其子按钮未禁用 - 如果禁用，则不会选择任何内容。 换句话说，它不会“找到”第二个启用的按钮，它只是检查第二个按钮是否启用并相应地选择它。

我已经尝试过了

• “ul li button:not([disabled]):nth-of-type(2)”

但问题是该按钮是

<li>

的唯一子元素，因此 nth-of-type(2) 没有任何内容可供选择。

我认为我需要能够写的是这样的：

• “ul (li button:not([disabled])):nth-of-type(2)”

但我认为这不是正确的语法:(

任何帮助将不胜感激！如果它对任何人有帮助，我正在编写一个 UDF 测试来查找（并选择）React 中时间选择器组件的第二个可用时间段。

Answer 1

这里有一种方法可以使用

:has()

来实现，现在所有更新的浏览器都支持它（感谢 FF 的跟进）：

button {
  width: 100px;
  height: 50px;
}

/* Second */
li:has(button[disabled])+li:has(button:not([disabled]))+li:has(button:not([disabled])) button {
  background: red;
}

/* first */
li:has(button[disabled])+li:has(button:not([disabled])) button {
  background: blue;
}

/* third */
li:has(button[disabled])+li:has(button:not([disabled]))+li:has(button:not([disabled]))+li:has(button:not([disabled])) button {
  background: green;
}

<ul>
  <li><button disabled/></li>
  <li><button disabled/></li>
  <li><button /></li>
  <li><button /></li>
  <li><button /></li>
</ul>

这不是很优雅，因为我们正在链接下一个同级

+

选择器，但它可以工作。