为什么我的CSS被SCSS覆盖，而SCSS甚至没有包括在内 [英] why my css is overriden by scss which is even not included

问题描述

我正在处理物化CSS并使用该库https://materializecss.com/

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

当我检查元素时，我看到Chrome正在从我的html中仍未使用的.scss文件中获取css。

而我只包括两个css文件。

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

推荐答案

您正在追逐幽灵。问题不是不是SCSS，而是评论中指出的CSS Specificity。忽略该规则来自.scss文件这一事实，并将重点放在css特性上。

为什么在检查器中看到.scss文件：
要包括的materialize.css文件包含一个对物化SCSS文件的引用(称为"源映射")(如果您查看Materialize.css文件，您将看到该文件底部列出了源映射引用)。由于该源映射，当您在浏览器的开发人员控制台中检查项时，它实际上会向您显示正在应用样式的SCSS行。这是一件好事，如果你自己在SCSS中开发，你会非常感激的。

真正的问题：
但问题是，materialize.css样式正在生效，而您的styles.css样式没有生效，因为CSS Specificity。

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

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

这些是特定的。它们只寻址li内的a元素，.collapsible-body内的.side-nav内的a元素(在第二个选择器中，当然还有额外的.nav.fixed元素)。

在您的样式中，您的填充被忽略，因为它包含一个更通用的(也称为不太具体的)选择器：

.collapsible-body li a { ...

这不是特定的。它通常寻址.collapsible-body中的li中的任何a元素。这些不会覆盖已更具体设置的样式，如您尝试覆盖的物化填充样式。

如果希望样式覆盖materialize样式，则需要使用至少与相同的样式。例如：

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

希望这能有所帮助。如果您打算继续使用MATERIALIZE、Bootstrap或任何其他框架，那么阅读一些关于CSS专用性的文章确实会让您受益良多。

这篇关于为什么我的CSS被SCSS覆盖，而SCSS甚至没有包括在内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！