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

发布于12月02日

所以，如果我有一份这样的 list :

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

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

现在我有:

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

但这只会 Select 第二个<li>，其子按钮未被禁用-如果它被禁用，则不会 Select 任何内容. 换句话说，它不"找到"第二个启用的按钮，它只是判断第二个按钮是否启用，并相应地 Select 它.

我试过了

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

但这样做的问题是，该按钮是<li>的唯一子项，所以第n类(2)没有任何东西可供 Select .

我想我需要写的是这样的:

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

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

如有任何帮助，将不胜感激！如果它对任何人有帮助，我正在编写一个UDF测试来为Reaction中的时间 Select 器组件查找(并 Select )第二个可用的时间段.

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; } /* no disabled buttons per comment by haolt */ li:first-child:has(button:not([disabled]))+li:has(button:not([disabled])) button { background: purple; }

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

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

推荐答案

Css相关问答推荐

CSS立方体覆盖

如何在css中从圆中切出1/n？

如何在不重叠侧边栏的情况下尽可能使元素居中？

根据现有值计算CSS变量的新值

如何在使用 bslib 5 的shiny 应用程序中使用样式参数排列 ui 元素

有没有办法在 CSS 字体速记中使用数字字体粗细？

如何使用 Sass to CSS 创建 H1 到 H6 标题并减小字体大小

如何在 VS Code 中获得 JavaFX CSS 属性的自动完成功能？

条件宽度和省略号不适用于样式化组件 - React.js

包含tailwind 中固定纵横比框的内容

Ant Design：将位置子菜单移动到屏幕顶部

CSS3 的：root 伪类和 html 有什么区别？

你如何调试可打印的 CSS？

Angular Material 中的样式垫 Select

内联块在 Internet Explorer 7、6 中不起作用

在整个 DIV 周围添加 CSS 框阴影

如何使多个 div 显示在一行中但仍保留宽度？

Flexbox 列自底对齐

HTML 元素默认为 display：inline-block？

使图像具有响应性 - 最简单的方法