CSS 可以将 nth-child 与 :not 一起计算吗？答案

【问题标题】：Can CSS count nth-child together with :not?CSS 可以将 nth-child 与 :not 一起计算吗？
【发布时间】：2017-11-08 14:21:33
【问题描述】：

我试图在纯 CSS 中的 那些仅可见 的 div 元素之后明确中断。由于 CSS 中没有这样的 :visible 选择器，我尝试在应该隐藏的 div 元素中添加一个名为 hidden 的类。

.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;
}
*/

    <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>

但我无法让它工作，似乎 nth-child(4n+1) 只听 .box 而不是 :not( .hidden) 规则。

如果没有 javascript/jQuery 就无法做到这一点，那么作为替代方案的简单 jQuery 选择器解决方案也可以作为一种解决方案。

如何做到这一点？

【问题讨论】：

您的问题不清楚。你想要clear: both; 用于所有可见的 div 吗？
我已将您的代码转换为 sn-p，因此我们可以看到发生了什么，但我不得不猜测 .box 和 .hidden 的样式。如有需要请更正
这需要JS。见stackoverflow.com/questions/5545649/…
@Phil 我认为那里不需要.box { float: left; margin: 1ex; }。它完全改变了以前的输出
@Karem 看起来它本来可以作为 4 级选择器。在那之前，我想你必须坚持使用 jQuery。

标签： jquery css

【解决方案1】：

要直接回答您的问题，“否”，nth-child 不能这样工作。

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

在确定兄弟位置时不考虑选择器。 :nth-of-type 有点作用，但仅基于元素类型，而不是任何任意选择器。

看这里的例子~https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#Result

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

例如

.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>

【讨论】：

谢谢，但这并不是真正回答问题/解决方案。问题在于如何正确选择，因为使用 :not() 时 :nth-child() 的行为会有所不同。
@Karem 我已经用nth-child上的一些令人失望的信息更新了我的答案

【解决方案2】：

这在 CSS3 中本机不支持，但将在 4 级选择器规范中。当然，这现在不显示任何内容，因为它尚不受支持。

在4级规范中，应该可以做到以下几点

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

    <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>

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

与此同时，可以使用 JavaScript 来执行此操作，尽管它非常繁琐。要按您的要求做，您必须这样做

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

.box.hidden {
  background: red;
}

    <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>

【讨论】：

【解决方案3】：

用 jquery 试试：

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

【讨论】：