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.item-container :nth-child(odd)。

Answer 2

如果您正在使用 bootstrap 并且碰巧使用了他们的 class 并且想要修改它，您必须确保 select 它与他们在他们的 CSS

nth-of-type or nth-child work different on chrome?