2

这有效： 

#sList li:visible {
    background: rgba(255,255,136,0.5);
}

这有效：

#sList li:nth-of-type(odd) {
    background: rgba(255,255,136,0.5);
}

这不会：

#sList li:visible:nth-of-type(odd) {
    background: rgba(255,255,136,0.5);
}

嗯……有什么帮助吗？

编辑：详细说明——我有一个搜索字段——在它下面.keyup过滤一个<ul>。

想想一个人造谷歌即时搜索类型的东西。我希望背景颜色交错。它们是在页面加载时，但是一旦您开始输入并且元素开始从列表中消除，斑马条纹背景图案就会消失并且变得不一致，因为某些元素现在被隐藏了。我想做一些事情，在每个.keyup搜索字段上重新应用斑马条纹，以便列表保持一致的条纹。

说得通？

4

2 回答 2

0

:nth-of-type只考虑元素的标签类型。没有办法让这个伪选择器选择第n个匹配的元素。

此外，:visible不是有效的伪选择器。

于 2012-04-05T14:59:35.183 回答
0

根据SitePoint 的伪类列表，没有 :visible。让我们用:hover来代替。

演示

当我们有一个列表时，当且仅当该元素是奇数子元素并且悬停时，我们可以使用这两个类来突出显示它。请注意 ipsum 在悬停时不会突出显示，但 Lorem 会突出显示。

#sList3 li:hover:nth-of-type(odd) {
    background: rgba(255,255,136,0.5);
}

<ul id="sList3">
  <li>Lorem</li>
  <li>ipsum</li>
  <li>Lorem</li>
  <li>ipsum</li>
  <li>Lorem</li>
  <li>ipsum</li>
  <li>Lorem</li>
  <li>ipsum</li>
</ul>
于 2012-04-05T15:07:37.050 回答