一个选择器，用于匹配没有某个类的第一个项目

Question

假设我有一个像这样的列表：

<ul>
    <li class="hidden">Horse</li>
    <li>Bear</li>
    <li>Cat</li>
</ul>

是否有可能获得第一个没有类.hidden，I tried this以及其他许多项目的li项目，但它不起作用：

li:not(.hidden):nth-child(1) {
    /* ... */
}

Fiddle with test

Answer 1

This StackOverflow answer非常详细地解释了这个主题。使用“适用于所有这些，然后删除除第一个之外的所有内容”的解决方案适用于您的小提琴：

li:not(.hidden){
    color: #0F0;
}

li:not(.hidden) ~ li:not(.hidden){
    color: inherit;
}