css - 第一个 child + 不是选择器？

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 方法

第一个 child 不是那样工作的。您可以在 BoltClock 的回答 here 中阅读更多相关信息。 .它选择父级的 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 选择器，但从现有的两个答案中可以看出，如果不对相邻的 sibling 进行覆盖，就不可能实现这一点。如果你想要一种直接的处理方式，那么你可以考虑使用 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() 函数或循环，因为我想说明它如何涵盖多种情况，但您可能不需要它们，具体取决于您的使用情况。