0

我有一个包含隐藏和可见项目的列表。可见项目有一个名为 active 的类。我正在尝试应用:nth-child(odd)or -: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 中删除不可见的项并放回去可能不是一个好主意。

4

3 回答 3

2

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

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

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

于 2012-05-09T19:08:35.990 回答
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>s 是干什么用的？考虑在那里做一些不同的事情......如果它们是为了间距，向一些 LI 添加一个“spacer”类并在其上放置边距/填充。

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

$( '#ul li:visible' ).each( function( i ){
    $( this )[ (1&i) ? 'addClass' : 'removeClass' ]( 'active' );
} )
于 2012-05-09T19:15:18.530 回答
0

在 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 和 A 获得绿色背景，但 1、3 和 9 不显示（显示：无）

于 2012-05-09T19:27:25.983 回答