css - 覆盖 SCSS 属性

Question

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

 ---
 ---

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

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

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

score 1 · Accepted Answer

这可能不起作用的原因有很多。在不熟悉输出和 html 的情况下，您应该检查一些内容（所有这些内容都可以通过浏览器开发人员工具进行检查。例如Chrome DevTools）

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

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

也许

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

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

实际上，您如何正确解决特异性问题将完全取决于您的 HTML、您如何构建它以及您将来如何更改它。仅仅学习级联和继承是如何工作的，真的没有什么可以替代的。

1 回答 1