为什么我的css被scss覆盖，甚至没有包括在内

我正在研究MaterializeCSS并使用这个库

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

当我检查元素时，我看到chrome正在从.scss文件中获取css，而我在html中仍然没有使用这些文件

而我只包含了两个css文件

<link type="text/css" rel="stylesheet" href="css/materialize.css"  media="screen,projection" />
<link type="text/css" rel="stylesheet" href="css/style.css"/>

---

你在追鬼。问题不在于SCS，而在于评论中指出的问题。忽略规则来自

.scss

文件的事实，关注CSS的特殊性

为什么在检查器中看到.scss文件：

materialize.css

文件（您将包括其中）包括对materialize SCSS文件的引用（称为“源映射”）（如果查看materialize.css文件，您将看到文件底部列出的sourcemap引用）。由于该源映射，当您在浏览器的开发人员控制台中检查项目时，它实际上会显示正在应用样式的SCSS行。这是一件好事，如果你自己在SCSS中发展，你会非常感激的

真正的问题：
然而，问题是，

materialize.css

样式正在生效，而您的

styles.css

样式没有生效，因为

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

.侧面导航可折叠车身李a，
.side nav.nav.fixed.可折叠车身li a{…

这些是特定的。它们只寻址

li

中的

a

元素，即

中的
可折叠体
，即
侧导航
中的
元素（在第二个选择器中，当然还有附加的
导航固定
元素）

在样式中，填充将被忽略，因为它包含一个更通用（即不太具体）的选择器：

。可折叠体LIA{…

这不是特定的。它通常用于处理
li中的
a
元素，而
li
中的
元素位于
可折叠体中
中。这些元素不会覆盖已设置得更具体的样式，例如您尝试覆盖的物化填充样式

如果希望样式覆盖
物化
样式，则需要使用至少同样特定的样式。例如：

.side-nav .collapsible-body li a,
.side-nav .nav.fixed .collapsible-body li a {
    padding-left: 50px;
    font-weight: 400;
}

希望这能有所帮助。如果您打算继续使用materialize、bootstrap或任何其他框架，阅读一些关于CSS专用性的文章确实会让您受益匪浅。
Chrome知道源映射，它将您链接回materialize使用的原始.scss文件。您需要更高的专用性来覆盖该设置。如何我可以这样做吗请帮我搜索CSS专用性。我甚至已经从我的系统中删除了scss文件，但它仍然显示出与我所说的相同的内容，Chrome知道Materialize的源映射。