nth-of-type 或 nth-child 在 chrome 上的工作方式不同？答案

【问题标题】：nth-of-type or nth-child work different on chrome?nth-of-type 或 nth-child 在 chrome 上的工作方式不同？
【发布时间】：2018-03-19 17:07:41
【问题描述】：

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

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

所以我希望在第一部分、第三部分等上看到深色 rgb 颜色和白色字体。在 Opera 和 Mozilla（以及在 Eclipse 预览中）它们看起来与预期的一样。尽管在 Chrome 上是深色背景，但它仅适用于偶数部分。有人遇到过这个问题，有什么提示吗？

模板也使用 Bootstrap

【问题讨论】：

实际上我用 nth-child(odd) 回到了我的第一个版本，现在它可以跨浏览器工作。奇怪的事情，因为我已经尝试了几次并且表现不佳。我有人对可能发生的事情有更好的了解，如果这个错误有一些隐藏的技巧，我会留下这个问题以获得更多想法。工作的代码与代码 sn-p 中的代码完全相同，我只是移回第 n 个孩子：
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example

【解决方案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)。

【讨论】：

不幸的是，您的解决方案有效，但在 Chrome 上仍然存在同样的问题......我已经通过再次使用第 n 个孩子解决了这个问题......不知道为什么......我的意思是在尝试第 n 个类型之前，我已经尝试了两次以上...
实际上，现在在前端的特定部分进行编辑时，我注意到我在没有注意到的情况下应用了您的想法，我认为这就是现在它起作用的原因......虽然我很确定我之前尝试过，也许这也是一个缓存问题，我读过其他类似的问题，有时浏览器由于某种原因没有得到所有的修改......
如果您怀疑网页未根据最新的样式更改呈现，您可以随时在浏览器中尝试 CTRL+F5。这样，您可以强制浏览器获取网页刷新所需的所有文件的最新版本。
确实，我对您所说的进行了一些研究，CTRL + F5 应该比普通 F5 更好，以确保我正在查看最新的修改并且该页面未从缓存中加载。我还找到了一篇关于此的详细文章：link

【解决方案2】：

如果您正在使用引导程序并且碰巧使用了他们的类并想要修改它，您必须确保您选择它的方式与他们在 CSS 中所做的相同

【讨论】：

我试图访问一个部分类，确保它被正确访问并且我没有其他部分可以干扰，但它没有工作.. 经过几次尝试，它工作正常并且可以跨浏览器使用第 n 个孩子（虽然我第一次尝试过）