为什么我的CSS被CSS覆盖，甚至没有包含

Question

我正在努力实现CSS并使用这个库https://materializecss.com/

我编译了sass并将css文件包含在我的html中，但是当我尝试做一些自定义css时，我发现了奇怪的事情。

当我检查元素时，我看到chrome正在从.scss文件中提取css，而我仍未在html中使用该文件。

当我只包括两个CSS文件时。

git push

Answer 1

您正在追捕幽灵。问题不是SCSS，而是与注释中指出的CSS Specificity有关。忽略规则来自.scss文件的事实，而专注于CSS特异性。

为什么在检查器中看到.scss文件：
您已包含的materialize.css文件包括对实现SCSS文件的引用（称为“源映射”）（如果您查看materialize.css文件，则会看到在文件底部列出的sourcemap参考）。由于具有该源映射，因此当您在浏览器的开发人员控制台中检查项目时，它实际上会向您显示正在应用样式的 SCSS 行。这是一件好事，如果您自己使用SCSS进行开发，将会对此感到非常感谢。

实际问题：
关键是，materialize.css样式正在生效，而您的styles.css样式由于CSS Specificity而没有效果。

请注意，物化样式中的选择器为：

.side-nav .collapsible-body li a, .side-nav .nav.fixed .collapsible-body li a { ...

这些是特定的。它们仅寻址a内，li内，.collapsible-body内的.side-nav元素（在第二个选择器中，当然还有附加的{ {1}}元素。

在您的样式中，填充被忽略，因为它包含一个更通用的（又称​​ Less Specific ）选择器：

.nav.fixed

这不是具体的。通常，它正在处理.collapsible-body li a { ...内a内的任何li元素。这些不会覆盖已设置的更具体的样式，例如您尝试覆盖的实现填充样式。

如果您希望样式覆盖.collapsible-body样式，则需要使用至少特定的样式。例如：

materialize

希望这会有所帮助。如果您将继续使用物化，引导程序或任何其他框架，那么阅读某些关于CSS特异性的文章确实会有所帮助。