我有一个动态列表，其中包含可见和隐藏的项目：
<ul>
<li class="hidden">
<li class="hidden">
<li>
</ul>
我希望能够对列表中第一个未隐藏元素应用样式。
关于第一个元素的代码：
ul li:first-child{
font-size:10px;
}
我获取非隐藏元素的代码
ul li:not(.hidden){
font-size:10px;
}
ul li:not(.hidden):first-child
（这个不起作用）
“第一个子元素”并不是这样使用的。你可以在BoltClock的回答这里找到更多信息。它选择父级中的first-child（也要匹配任何其他条件），而不能选择满足所提供条件的孩子中的第一个元素。
相反，你可以先在所有的li:not(.hidden)元素上应用所需属性，然后再为 li：not（.hidden）〜li：not（.hidden）覆盖默认设置。第二个选择器的意思是除第一个之外，任何作为另一个兄弟的.hidden元素（这意味着它不是第一个）都会得到默认设置，而第一个则会得到修改后的设置（代码段中的红色颜色）。
应该使用通用兄弟选择器，而不是相邻兄弟选择器（+），因为正如你在下面的代码片段中看到的那样，只要之间没有其他的.hidden，它就只选择所有其他元素。
ul > li:not(.hidden) {
color: red;
}
ul#one > li:not(.hidden) ~ li:not(.hidden) {
color: black;
}
ul#two > li:not(.hidden) + li:not(.hidden) { /* wont help if any other hidden elements in between */
color: black;
}<ul id='one'>
<li class="hidden">First hidden</li>
<li class="hidden">Second hidden</li>
<li>First not hidden</li>
<li>Second not hidden</li>
<li class="hidden">Third hidden</li>
<li>Third not hidden</li>
</ul>
<ul id='two'>
<li class="hidden">First hidden</li>
<li class="hidden">Second hidden</li>
<li>First not hidden</li>
<li>Second not hidden</li>
<li class="hidden">Third hidden</li>
<li>Third not hidden</li>
</ul>我知道您要求纯CSS选择器，但从现有答案中可以看出，没有办法在不覆盖相邻兄弟的情况下实现这一点。如果您想要一个简单直接的方法来处理问题，则可以考虑使用JS或jQuery。以下是几个示例片段：
jQuery：
$(document).ready(function() {
$('ul').each(function() {
$(this).children('li:not(.hidden):first').css('color', 'red');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='one'>
<li class="hidden">First hidden</li>
<li class="hidden">Second hidden</li>
<li>First not hidden</li>
<li>Second not hidden</li>
<li class="hidden">Third hidden</li>
<li>Third not hidden</li>
</ul>
<ul id='two'>
<li>First not hidden</li>
<li class="hidden">First hidden</li>
<li class="hidden">Second hidden</li>
<li>Second not hidden</li>
<li>Third not hidden</li>
<li class="hidden">Third hidden</li>
<li>Fourth not hidden</li>
</ul>
<ul id='two'>
<li class="hidden">First hidden</li>
<li>First not hidden</li>
<li class="hidden">Second hidden</li>
<li>Second not hidden</li>
<li>Third not hidden</li>
<li class="hidden">Third hidden</li>
<li>Fourth not hidden</li>
</ul>JavaScript:
$(document).ready(function() {
var ulEls = document.querySelectorAll('ul');
for (var i = 0; i < ulEls.length; i++) {
ulEls[i].querySelector('li:not(.hidden)').setAttribute('style', 'color: red');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='one'>
<li class="hidden">First hidden</li>
<li class="hidden">Second hidden</li>
<li>First not hidden</li>
<li>Second not hidden</li>
<li class="hidden">Third hidden</li>
<li>Third not hidden</li>
</ul>
<ul id='two'>
<li>First not hidden</li>
<li class="hidden">First hidden</li>
<li class="hidden">Second hidden</li>
<li>Second not hidden</li>
<li>Third not hidden</li>
<li class="hidden">Third hidden</li>
<li>Fourth not hidden</li>
</ul>
<ul id='two'>
<li class="hidden">First hidden</li>
<li>First not hidden</li>
<li class="hidden">Second hidden</li>
<li>Second not hidden</li>
<li>Third not hidden</li>
<li class="hidden">Third hidden</li>
<li>Fourth not hidden</li>
</ul>注意：我在上面的代码片段中使用了.each()函数或循环，因为我想说明它如何涵盖多种情况，但根据您的用途，您可能不需要它们。
:first-child针对父元素进行匹配，而不是第一个匹配的元素。你可以使用兄弟选择器来实现相同的效果，但是必须指定基准元素，因为没有办法跨整个列表仅匹配一次：
ul > li:not(.hidden):first-child,
ul > li.hidden + li:not(.hidden) {
font-size: 10px;
}
ul > li:not(.hidden) ~ li.hidden + li:not(.hidden) {
font-size: 1em;
}<ul>
<li>1
<li class="hidden">2
<li>3
<li>4
</ul>
<ul>
<li class="hidden">1
<li class="hidden">2
<li>3
<li>4
</ul>:not，就会有一个有用的 CSS4 未来特性 nth-match，我们可以这样做：li:nth-match(1 of :not(.hidden)) {
font-size: 10px;
}
但出于性能考虑，它可能不允许嵌套:not。