CSS:not（[class*=”hidden“）：第n个类型（4n+；1）不工作

请运行代码段以查看我的问题是什么。我有一系列的div在左边浮动。在定义了一定数量的div之后，我希望它们断开到一个新行，在我的示例中，每5个div应该清除一个float，以便它在新行中开始。到目前为止没有问题，当我有一些div与某个类在一起时，这里是

class=“hidden”

，我不想在我的规则中计算它，这就是我在这里排除它的原因：

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

正如您在示例代码段中所看到的，第三个（隐藏的）div仍然被计算到类型规则的第n个，这导致在第4个div之后出现不需要的“换行”

有人知道我的选择器出了什么问题吗

.box{
背景色：#a00；
边框：1px实心#000；
颜色：#fff；
浮动：左；
高度：64px；
利润率：10px；
文本对齐：居中；
宽度：64px；
}
.隐藏{
显示：无；
}
.box:not（[class*=“hidden”]）：类型的第n个（4n+1）{
清除：左；
}

1
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13

选择器的

.box

和

:not（）

部分与

:nth-of-type（）

无关。

：nth-of-type（）

唯一考虑的是这些元素都是

div

s。您可以指定类型（4n+1）的

div:nth

，它将以完全相同的顺序匹配相同的元素（尽管没有属性否定），即使同一父级中碰巧有任何其他

div

元素不是

.box

我对的回答详细解释了为什么这些选择器不能按预期的方式工作，但要点是每个选择器都独立运行，

：nth-of-type（）

恰好只关心元素类型。另请参见，以获取示例

---

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

CSS选择器的工作方式与您想象的不同，该选择器不会排除第n个类型的计数的类隐藏框……只要在4n+1的类隐藏

时不应用清除。box:not（[class*=“hidden”]）：第n个类型（4n+1）

此处

：not

并不像您预期的那样工作。使用开发工具检查应用了什么

.box

css我添加了一个提琴。你如何用纯CSS解决这个问题？仅仅用与这个问题相关的CSS作品是不可能的，但是否定应该说

：Not（.hidden）

，而不是

：Not（[class*=“hidden”]）

。嗯，至少可以说，这是令人失望的。这有道理吗？或者这只是为了简化浏览器公司的实现？像我描述的那样的问题应该是很常见的，如果你必须使用JS来解决这个问题，它在CSS 3中显示了一个真正的缺陷。@connexo:Selectors 4以

的形式对此提出了一个解决方案。box:nth child（4n+1 of:not（.hidden））

但我不知道它是否只是在起草Selector 4时添加的，或者如果它被提议用于选择器3，但由于实现困难而推迟。也许我应该尝试使用flex Box。我仍然需要为旧浏览器创建一个回退解决方案。即使我这样做了，对于没有JS可用的旧浏览器，仍然没有解决方案，对吗？可能没有，不幸的是，这就是你必须做出妥协的地方。20年的CSS开发，对于如此简单的东西仍然没有可行的解决方案…：(