Question

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

.printableLogo {
    display: none;

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

对于特定页面，我希望不显示任何内容。

如何实现？

Answer 1

我建议您执行以下一项操作。

从不在父/全局CSS文件中使用!important
如果需要覆盖它，请编写内联CSS或在特定页面中添加CSS标签。
为特定的div添加另一个唯一的类/ id ，并为此应用样式。

Answer 2

解决方案1：直接在该特定页面上的元素上引入样式属性（style =“ display：none;”）。请注意，重要的将覆盖此样式。因此，请从您的重要信息中删除重要信息，或将其添加到嵌入式信息中。

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

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

Answer 3

尝试一下

<body class="pagenumber1">

.pagenumber1 .printableLogo {
  display:none;
}

Answer 4

您可以添加一个新的.sass文件，并将其链接到通用css文件下方，并使用例如：

display:unset !important;

Answer 5

我也不会建议使用display：unset！important;如果无法添加内联CSS或ID，则可以添加用于覆盖CSS的ID，然后可以使用display：unset！important;

您也可以在特定的页面模板中尝试

<style>
.selector{
  display:none;
}
<style>

如何在特定页面中覆盖CSS重要规则

5 个答案: