覆盖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如何工作真的没有替代品。