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的回答here中阅读更多相关信息。它选择父项的first-child（也匹配任何其他条件），并且不能选择与提供的条件匹配的子项中的第一个元素。

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

一般的兄弟选择器应该用作相邻的兄弟选择器（+）可能无法完全帮助你，因为正如你在下面的代码片段中看到的那样，它只会选择所有其他元素，只要没有中间的其他.hidden。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

使用JavaScript / jQuery

我知道您已经要求使用纯CSS选择器，但从现有的答案中可以看出，如果不对相邻的兄弟姐妹进行覆盖，就无法实现这一点。如果你想要一种直接的处理方式，那么你可以看看使用JS或jQuery。以下是几个示例代码段：

<强> jQuery的：

＆＃13;

$(document).ready(function() {
  $('ul').each(function() {
    $(this).children('li:not(.hidden):first').css('color', 'red');
  });
});

＆＃13;

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

＆＃13;

<强> JavaScript的：

＆＃13;

$(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');
  }
});

＆＃13;

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

＆＃13;

注意我在上面的代码段中使用了.each()函数或循环，因为我想说明它是如何涵盖多个案例的，但根据您的使用情况，您可能不需要它们。

第一个孩子+非选择者？

1 个答案:

仅CSS方法

使用JavaScript / jQuery