Bootstrap/CSS: Clearfix影响偶数/奇数索引



当我使用不同高度的列时,我使用clearfix来防止Bootstrap网格破裂。

但是,一旦将clearfixdiv添加到文档中,那么在源文件中出现在它后面的列的行为就好像它们具有与实际不同的偶数/奇数索引。

我创建了一个相关的演示。正如您所看到的,删除clearfixdiv会使div的颜色发生变化,就好像它们的索引发生了变化一样。

你知道可能是什么原因引起的,我能做些什么来纠正它吗?

如果你看一下nth-of-type定义它指定

:nth-last-of-type(an+b)伪类符号表示一个元素在文档树中之后有一个+b-1的兄弟元素,它们具有相同的扩展元素名,对于n的任何零或正整数值,并且有一个父元素。参见:n -child()伪类了解其参数的语法。

这里的关键是它声明:

相同的扩展元素名称

从字面上看,css选择器针对特定元素,然后在特定元素名称上匹配奇数和偶数,而不是使用特定选择器匹配的元素。

这就是为什么用span替换div会起作用,因为它永远不会匹配,因为它是一个不同的元素。