CSS：not（[class * =＆＃34; hidden＆＃34;]）：nth-​​of-type（4n + 1）不工作

Question

请运行代码段以查看我的问题。我有一系列div向左浮动。在定义数量的div之后，我希望它们突破到一个新行，在我的例子中，每个第5个div应该清除浮动，因此它以新行开始。到目前为止没有问题，当我有一些特定类的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 s。您可以指定div:nth-of-type(4n+1)并且它将以完全相同的顺序匹配相同的元素（尽管没有属性否定），即使在同一父代中恰好有任何其他div元素不是{ {1}}。

我对this related question的回答详细解释了为什么这些选择器不能按预期的方式工作，但要点是每个选择器都独立运行，.box恰好只关心元素类型。另请参阅this answer以获取插图示例。

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