css - 一个选择器来匹配第一个没有某个类的元素

Question

假设我有这样一个列表:

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

是否有可能获得第一个没有 .hidden 类的 li 元素，I tried this和许多其他但它没有用:

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

Fiddle with test

Answer 1

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

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

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