SCSS文件中首个样式规则被忽略问题求助

我在开发网站样式用SCSS时碰到个怪事：文件里的第一条样式规则被忽略了。

初始SCSS代码开头是这样的：

@import "_variables";
@import "_mixins";

a.mobile-nav__link:nth-child(2) {
  display: none !important;
}

页面源码里能看到这条display:none !important规则，但实际就是不生效。直到我把这条规则重复写了一遍才正常：

@import "_variables";
@import "_mixins";
a.mobile-nav__link:nth-child(2) {
  display: none !important;
}
a.mobile-nav__link:nth-child(2) {
  display: none !important;
}

SCSS已经编译成CSS嵌入页面了，但浏览器代码检查器里看不到这个display属性被应用，这到底是怎么回事？

可能的原因： #

• 编译后CSS的规则覆盖问题：哪怕加了!important，也可能被@import进来的文件（比如_variables或_mixins）里的更特殊规则，或是页面其他位置的同选择器规则覆盖。重复写一遍后，规则位置靠后，优先级叠加才压过了原有覆盖规则。
• SCSS编译解析异常：少数情况下，@import语句后的第一条规则可能因为编译工具的解析bug被部分截断或忽略，重复规则后编译工具才正确处理。可以直接查看编译后的纯CSS文件，确认第一条规则的语法是否完整。
• 浏览器缓存或渲染bug：浏览器可能缓存了旧的CSS版本，虽然页面源码显示新规则，但渲染时仍用缓存内容。重复规则后文件哈希值变化，缓存失效才生效。可以试试强制刷新页面（Ctrl+F5），看初始代码是否能正常工作。
• 选择器匹配误差：看起来选择器没问题，但实际DOM结构可能和a.mobile-nav__link:nth-child(2)不匹配——比如父元素里的子元素顺序变动，或是该a标签并非父元素的第二个子节点。重复规则的过程中可能无意间调整了DOM，或是浏览器重新计算了选择器匹配关系。

内容的提问来源于stack exchange，提问作者zolaDesigner