CSS可以计算nth-child和：不是吗？

Question

我试图在纯粹的CSS中明确区分那些只有可见的div元素。由于CSS中没有这样的：可见选择器，我试图将一个名为hidden的类添加到应该隐藏的div元素中。

＆＃13;

＆＃13;

.box.hidden {
  background: red;
}
.box:not(.hidden):nth-child(4n+1) {
  border: 5px solid green;
}
/* try then without :not() and see the difference
.box:nth-child(4n+1) {
  border: 5px solid green;
}
*/

＆＃13;

    <div class="box">Hello</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box">Hello</div>
    <div class="box">Hello</div>
    <div class="box">Hello</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box">Hello</div>
    <div class="box hidden">Dont show</div>
    <div class="box">Hello</div>
    <div class="box">Hello</div>
    

＆＃13;

＆＃13;

＆＃13;

但我无法让它发挥作用，似乎 nth-child（4n + 1）只能听 .box 而不是：not（ .hidden）规则。

如果没有javascript / jQuery这是不可能的，那么作为替代方案的简单jQuery选择器解决方案也可以作为解决方案。

如何实现这一目标？

Answer 1

要直接回答您的问题，“否”，nth-child不能正常运作。

  

:nth-child() CSS伪类根据他们在一组兄弟姐妹中的位置匹配一个或多个元素。

确定同级位置时不考虑选择器。 :nth-of-type类似但只是基于元素类型而不是任何任意选择器。

请参阅此处的示例〜https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#Result

我建议使用flex布局而不是浮动和清除。

例如

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 0 1 25%;
}

.hidden {
  display: none;
}

<div class="container">
  <div class="box">Hello</div>
  <div class="box">Hello</div>
  <div class="box hidden">Dont show</div>
  <div class="box hidden">Dont show</div>
  <div class="box hidden">Dont show</div>
  <div class="box">Hello</div>
  <div class="box hidden">Dont show</div>
  <div class="box hidden">Dont show</div>
  <div class="box">Hello</div>
  <div class="box">Hello</div>
  <div class="box hidden">Dont show</div>
  <div class="box">Hello</div>
  <div class="box">Hello</div>
  <div class="box">Hello</div>
  <div class="box">Hello</div>
</div>

Answer 2

CSS3本身不支持此功能，但它将在4级选择器规范中。当然，现在还没有显示任何内容，因为它尚未得到支持。

在4级规范中，应该可以执行以下操作

＆＃13;

＆＃13;

.box.hidden {
  background: red;
}
.box:nth-child(4n+1 of :not(.hidden)) {
  border: 5px solid green;
}

＆＃13;

    <div class="box">Hello</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box">Hello</div>
    <div class="box">Hello</div>
    <div class="box">Hello</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box">Hello</div>
    <div class="box hidden">Dont show</div>
    <div class="box">Hello</div>
    <div class="box">Hello</div>
    

＆＃13;

＆＃13;

＆＃13;

这里是formal specification，目前是编辑的草稿。实施例43是这里感兴趣的。

与此同时，可以使用JavaScript来实现这一点，尽管它非常繁琐。要做你所要求的，你必须这样做

＆＃13;

＆＃13;

Array.from(
	document.querySelectorAll('.box:not(.hidden)')
).filter(
	(val, index, a) => index % 4 == 0
).forEach(
	elem => elem.style['border'] = '5px solid green'
);

＆＃13;

.box.hidden {
  background: red;
}

＆＃13;

    <div class="box">Hello</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box">Hello</div>
    <div class="box">Hello</div>
    <div class="box">Hello</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box hidden">Dont show</div>
    <div class="box">Hello</div>
    <div class="box hidden">Dont show</div>
    <div class="box">Hello</div>
    <div class="box">Hello</div>
    

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试使用jquery：

$('.box').each(function(el,i){
  $(this).not('.hidden').html('<br/>'); //or $(this).not('.hidden').css('clear','both');
});