html - nth-of-type 或 nth-child 在 chrome 上的工作不同？

Question

我在为一个小元素构建模板时遇到问题:尝试了 nth-child 和 nth of type 但它们在 Chrome 上的工作方式似乎不同，就像它是从 0 开始索引的......我已经在其他浏览器上尝试过，它们所有的工作都一样。代码示例是:

.section:nth-of-type(odd) {
    background-color: rgb(69, 77, 96);
    color: #fff;
}

所以我希望在第一部分、第三部分等上看到深色 rgb 颜色和白色字体。在 Opera 和 Mozilla(以及在 eclipse 预览中)它们看起来像预期的那样。尽管在 Chrome 上，深色背景仅应用于偶数部分。任何人都遇到过这个问题并且有任何提示吗？

模板也使用了 Bootstrap

Answer 1

这可能是因为 nth-child 和 nth-of-type 通常用于元素而不是更复杂的选择器 ( https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type )。

尝试将偶数项和奇数项放入容器元素中，然后使选择器成为 div.item-container div:nth-of-type(odd) 或 div。元素容器:第 n 个 child (奇数)。