Question

这有效：

#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处重新应用斑马条纹，以便列表保持一致条纹。

有意义吗？

Answer 1

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

此外，:visible不是有效的pseudo-selector。

Answer 2

根据SitePoint's list of pseudoclasses，没有：可见。让我们使用:hover代替一个例子。

demo

当我们有一个列表时，我们可以使用这两个类来强调它，当且仅当元素是一个奇怪的子元素并且悬停时。注意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>

如何在元素上设置两个伪类？

2 个答案:

demo