html - 如何覆盖特定页面中的 CSS 重要规则

Question

我有一个父 .sass 文件，我在其中定义了以下规则

.printableLogo {
    display: none;

    &.hide {
        @media print {
            overflow: hidden;
            display: block !important;
        }
    }
}

对于特定页面，我想让显示为无。

如何做到这一点？

标签： htmlcsssass

Answer 1

解决方案 1：直接在该特定页面上的元素上引入样式属性 (style="display:none;")。请注意，重要将覆盖此样式。因此，要么从您的 sass 中删除重要的内容，要么将其添加到内联的内容中。

解决方案 2：在该页面上的元素上放置一个特定的类或 id，然后您可以在 sass 中引用它。

解决方案 3：在每个页面的 body 上引入一个唯一的 id，然后您可以在 sass 中引用它以将样式应用于特定页面上的元素。