Sass - 选择具有特定角色的标题，但如果具有特定类则不应用样式

Question

问题

如何嵌套 SCSS 以将样式应用于 <header>，仅当它具有 role="banner" 时，但如果标头具有 page-frontpage 类，则不得应用。然后我会将特定页面的样式嵌套在里面。

背景

我正在添加到别人的代码中，所以不允许覆盖第一个编写的样式。我认为如果在其他地方使用标题可能会出现问题，所以如果它具有“横幅”的作用，我想定位样式。我正在为主页编写样式，并且我的页面有不同的布局，所以我希望以前的样式不应用于我的页面。

我知道这不是最好的方法，但我必须在这个范围内工作。

代码

这里是my demo on codepen

HTML

根据正在查看的页面将类传递到标题

<header role="banner" class="<?=$varCurrentPage?>">

SCSS

原始代码

header{
    text-align: center;
    background-color: #444;
    color: #fff;
    min-height:80vh;
    background-size:cover;
    position:relative;
}

目前修改

header[role=banner] {

Answer 1

给你：

header[role="banner"]:not(.page-frontpage) {
    text-align: center;
    background-color: #444;
    color: #fff;
    min-height:10vh;
    background-size:cover;
    border: red 1px dotted;
    position:relative;
}