CSS :not([class*="hidden"]):nth-of-type(4n+1) 不工作

Question

请运行 sn-p 看看我的问题是什么。我有一系列向左浮动的 div。在定义数量的 div 之后，我希望它们换行，在我的示例中，每 5 个 div 应该清除浮动，因此它从新行开始。到目前为止没有问题，当我有一些具有某个类的 div 时，这里是 class="hidden" 我不想在我的规则中计算，这就是我在这里排除它的原因：

.box:not([class*="hidden"]):nth-of-type(4n+1) {
    clear: left;
}

正如您在示例 sn-p 中看到的那样，第三个（隐藏的）div 仍被计入第 n 个类型规则，这会导致在 div 编号之后出现不需要的“换行符”。 4.

有人知道我在选择器中做错了什么吗？

Link to Fiddle

.box {
  background-color: #a00;
  border: 1px solid #000;
  color: #fff;
  float: left;
  height: 64px;
  margin: 10px;
  text-align: center;
  width: 64px;
}

.hidden {
  display: none;
}

.box:not([class*="hidden"]):nth-of-type(4n+1) {
  clear: left;
}

<div class="box">1</div>
<div class="box">2</div>
<div class="box hidden">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>

Answer 1

选择器的.box 和:not() 部分与:nth-of-type() 无关。 :nth-of-type() 唯一考虑的是这些元素都是divs。您可以指定div:nth-of-type(4n+1)，它会以完全相同的顺序匹配相同的元素（尽管没有属性否定），即使在同一父级中碰巧有任何其他div 元素不是.box。

我对@9​​87654321@ 的回答详细解释了为什么这些选择器不能按您期望的方式工作，但要点是每个选择器都是独立运行的，而:nth-of-type() 恰好只关心元素类型。另请参阅 this answer 以获取图解示例。

由于当前 CSS 选择器的工作方式，无法使用纯 CSS 过滤掉这些元素；您将需要使用 JavaScript 来计算元素。