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

Question

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

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

正如您在示例代码段中看到的那样，第三个（隐藏的）div 仍被计入第 nth-of-type-rule，这导致在 [= 之后出现不需要的 "line-break" 34=] 没有。 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 explains in detail why these selectors don't work the way you would expect, but the gist is that every selector operates independently, and :nth-of-type() just happens to care only about the element type. Also see this answer 的回答有一个示例。

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

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

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

css

css-selectors