第一个孩子+非选择者？

Question

我有一个动态列表,其中包含可见和隐藏的项目:

<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

(哪个不起作用)

Answer 1

仅 CSS 方法

第一个孩子不是这样工作的。您可以在 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>

使用 JavaScript/jQuery

我知道您要求使用纯 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()函数或循环，因为我想说明它如何涵盖多种情况，但根据您的使用情况，您可能不需要它们。