css - 覆盖 SCSS 属性

Question

我正在尝试更改 Jekyll 闰日主题中横幅的颜色，此处 https://github.com/pages-themes/leap-day/blob/master/_sass/jekyll-theme-leap-day.scss

为此，我在我的 github 页面中添加了一个 assets/css/style.scss，内容如下

 ---
 ---

@import "{{ site.theme }}";

#banner {
    background: #a90000;
    border: 1px solid #3399cc;
}

但是什么都没有改变。如何在 SCSS 中覆盖横幅 div 的这些值？

Answer 1

这可能不起作用的原因有很多。在不熟悉输出和 html 样式的情况下，这里有一些您应该检查的东西(所有这些都可以通过浏览器开发人员工具检查。例如 Chrome DevTools)

1. 带有 id="banner" 的元素存在于您的 html 中并且可见。
2. 您对 SCSS 添加的内容实际上已包含在内并应用于该元素。您可以通过检查元素在 Chrome 开发人员工具中检查这一点。在样式下，您应该能够看到您的样式规则和其他样式规则。如果你不能，那么你可能有一个选择器问题，可能是由一些早期的嵌套样式引起的。 (如果您也排除了这种可能性，并且您添加的内容没有出现在输出中的任何地方，那么您构建和获取 SCSS 的方式出了问题)。
3. 如果您可以看到它们但有一条线穿过它们，那么它们将被具有更高 CSS 特异性的规则否决。您可以通过使选择器更具体来解决此问题。例如。

div#banner {
    background: #a90000;
    border: 1px solid #3399cc;
}

或许

.someWrappingClass #banner{
    background: #a90000;
    border: 1px solid #3399cc;
}

请记住，这些将改变它们的选择方式 - 如果 HTML 发生变化，这可能会在以后成为一个问题。

实际上，如何正确解决特异性问题将完全取决于您的 HTML、您如何构造它以及您将来可能如何更改它。真的没有什么可以替代学习如何做 cascade and inheritance有效。