Css 第一个孩子&x2B；不是选择器？

我有一个包含可见和隐藏项的动态列表：

<ul>
    <li class="hidden">
    <li class="hidden">
    <li>
</ul>

获取非隐藏元素的代码

ul li:not(.hidden){
  font-size:10px;
}

如何在跨浏览器解决方案中合并这两者？理想的情况是：

ul li:not(.hidden):first-child

---

（不起作用）

：第一个子元素与父元素匹配，而不是第一个匹配的元素。使用同级选择器可以实现同样的效果，但必须指定基，因为无法在整个列表中只匹配一次：


ul>li:not（.hidden）：第一个孩子，
ul>li.hidden+li:未（.hidden）{
字体大小：10px；
}
ul>li:not（.hidden）~li.hidden+li:not（.hidden）{
字号：1em；
}

一,
2
三,
四,


1
2
三,
四,
CSS专用方法
第一个孩子不是这样工作的。你可以在BoltClock的答案中了解更多。它选择父级的
第一个子级
（也匹配任何附加条件），并且不能从匹配提供条件的子级中选择第一个元素

相反，您可以首先对所有
li:not（.hidden）
元素应用所需的属性，然后使用
li:not（.hidden）~li:not（.hidden）
的默认设置覆盖它。第二个选择器意味着任何
.hidden
元素，如果它是另一个元素的同级元素（意味着它不是第一个）将获得默认设置，而第一个选择器将获得修改后的设置（代码段中的红色）

一般同级选择器应用作相邻同级选择器（
+
），但可能无法完全帮助您，因为正如您在下面的代码段中所看到的，只要中间没有其他
。隐藏的
，它将只选择所有其他元素


ul>li:未（.hidden）{
颜色：红色；
}
李：不（.hidden）~李：不（.hidden）{
颜色：黑色；
}
ul#two>li:not（.hidden）+li:not（.hidden）{/*如果中间有任何其他隐藏元素，则不会有帮助*/
颜色：黑色；
}

第一次隐藏
第二次隐藏
首先不要隐藏
第二，不隐藏
第三个隐藏
第三，不隐藏


第一次隐藏
第二次隐藏
首先不要隐藏
第二，不隐藏
第三个隐藏
第三，不隐藏
，而这将适用于所示的确切标记。如果第一个元素本身没有隐藏，它将失败。请注意，这仍然不起作用。请看第一个片段，以及第一个和第三个片段是如何形成样式的。@Harry，这是故意的。我不明白。这可能是故意的，但似乎并不适用于所有情况。对不起，如果我吹毛求疵，我不是想说我的答案是正确的，但我想知道我是否遗漏了什么。哈利是对的。我想得到第一个未隐藏的元素，因此如果1被隐藏，它会将样式应用于第二个元素。如果1和2都是隐藏的，则将应用于3，依此类推“li:not（.hidden）：first child”是有效的，但它实际上意味着，如果第一个子级也没有.hidden类，则选择第一个子级（第一个子级确实有.hidden类，因此它不选择任何内容），尽管这样做有效，如果你能找到更好的方法，请使用它：）据我所知，没有其他的纯CSS方法。@raphadko:正如你从Kit Sunde的回答中所看到的，目前除了覆盖样式之外，没有其他纯CSS方法。然而，从你之前的评论中，我了解到你对使用它不太感兴趣。你想使用JS/jQuery作为替代方案吗？jQuery看起来很酷，我对列表做了一些更改，这样隐藏的项目就会移动到一个单独的列表中。不用担心，我想知道什么时候不可能以最佳方式完成某件事，然后我们可以开始寻找不同的方法来解决问题
ul li:not(.hidden):first-child