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

Question

请运行该代码段以查看我的问题所在。我有一系列 div 向左浮动。在定义数量的 div 之后，我希望它们换行，在我的示例中，每第 5 个 div 应该清除 float ，以便它在新行中开始。到目前为止没有问题，当我有一些具有特定类的 div 时，这里是 class="hidden" 我不想在我的规则中计算，这就是我在这里排除它的原因:

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

正如您在示例片段中看到的那样，第三个(隐藏的)div 仍被计入第 nth-of-type-rule，这导致在 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() 唯一考虑的是这些元素都是 div。您可以指定 div:nth-of-type(4n+1) 并且它会以完全相同的顺序匹配相同的元素(尽管没有属性否定)，即使碰巧有任何其他div 元素在同一父级中，但不是 .box。

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

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