Question

我有一个包含隐藏和可见项目的列表。可见项有一个名为active的类。我正在尝试将:nth-child(odd)或 - :nth-of-type(even)仅应用于这些特定的可见项目，但结果完全是随机的。

我期待：黄色，绿色，黄色，绿色，黄色。

结果：黄色，黄色，绿色，黄色，绿色，绿色。

我以为我能够过滤类名和节点。但显然事实并非如此。

    <ul>
      <li>hide</li>
      <li class="active">visible</li>
      <li>hide</li>
      <li class="active">visible</li>
      <li class="active">visible</li>
      <li>hide</li>
      <li class="active">visible</li>
      <li class="active">visible</li>
      <li>hide</li>
      <li class="active">visible</li>
    </ul>

风格：

li {
   background-color:red;
   display:none;
}

li.active {
  display:block;
}

li.active:nth-child(odd) {
  background-color:yellow;
}

li.active:nth-child(even) {
  background-color:green;
}

有解决方法吗？

编辑：我不能使用jQuery或任何其他库，只能使用本机js。在现实生活中，我有50多个列表项目，其中包含图像和文本，因此从DOM中删除不可见的项目并放回去可能不是一个好主意。

Answer 1

这很有道理，因为空列表项也是彩色的。

最优雅的解决方案：删除空列表元素的渲染。

另一种可能性是使用jQuery在文档加载后删除空列表元素。

Answer 2

  <li></li>                // odd , display none   
  <li class="active"></li> // even                 green
  <li></li>                // odd , display none
  <li class="active"></li> // even                 green
  <li class="active"></li> // odd                  yellow
  <li></li>                // even, display none
  <li class="active"></li> // odd                  yellow
  <li class="active"></li> // even                 green
  <li></li>                // odd , display none
  <li class="active"></li> // even                 green

什么没有意义？你的空<li>是什么？考虑做一些不同的事情...如果他们是间距，为一些LI添加一个“spacer”类，并在其上加上margin / padding。

假设您希望行颜色根据可见内容动态更改，则无法使用纯CSS执行此操作。使用jQuery很简单，例如：

$( '#ul li:visible' ).each( function( i ){
    $( this )[ (1&i) ? 'addClass' : 'removeClass' ]( 'active' );
} )

Answer 3

在Firefox中为我工作。

<link rel="stylesheet" type="text/css" href="LI.css" />
Test
<ul>
<li>1</li>
<li class="active">2</li>
<li>3</li>
<li class="active">4</li>
<li class="active">5</li>
<li>6</li>
<li class="active">7</li>
<li class="active">8</li>
<li>9</li>
<li class="active">A</li>
</ul>

2,4,8＆amp;得到绿色背景，但1,3和＆amp; 9不显示（显示：无）

CSS3：nth-child（奇数）/偶数不一致

3 个答案:

CSS3：nth-​​child（奇数）/偶数不一致

3 个答案:

CSS3：nth-child（奇数）/偶数不一致