Question

我正在寻找一种CSS（无JS）方式来忽略第n个子计数中的隐藏元素。这可能吗？

我有这个HTML：

<div class="gallery-item"><img src="http://placehold.it/150x150"></div>
<div class="gallery-item"><img src="http://placehold.it/150x150"></div>
<div class="gallery-item empty"></div>
<div class="gallery-item"><img src="http://placehold.it/150x150"></div>
<div class="gallery-item empty"></div>
<div class="gallery-item"><img src="http://placehold.it/150x150"></div>
<div class="gallery-item"><img src="http://placehold.it/150x150"></div>

我正在尝试定位每个非空的图库项目，但这不起作用：

.gallery-item:not(.empty):nth-child(2n) {}

我不想使用JS，因为这是一个复杂的站点，有很多断点，我不想为这个基本的东西添加onresize监听器。

Answer 1

这可能是零帖，因为它使用JS。然而，在这种情况下似乎只是选择。您并不想使用我理解的JS。但到目前为止，没有一个人只提供CSS解决方案，至少考虑一下：http://codepen.io/zvona/pen/jPZYNx

var galleryItems = document.querySelectorAll('.gallery-item:not(.empty)');

[].forEach.call(galleryItems, function(item, i) {
  item.classList.toggle('notEmptyAndEven', i % 2)
});

然后只需添加.notEmptyAndEven选择器和您需要的CSS规则。

Answer 2

您必须使用以下代码定位第二项

.gallery-item:not(.empty):nth-child(2) { //not :nth-child(2n)
    background:#ddd
}

链接JSFIDDLE

选择nth-child跳过隐藏元素

2 个答案: