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

Question

问题

如果样式<header>，如何将样式嵌套到role="banner"，但如果标题的类为page-frontpage，则必须不应用样式。然后我将嵌套特定页面的样式。

背景

我正在添加其他代码，因此不允许覆盖第一个写入的样式。我认为如果在其他地方使用标题可能会有问题，所以如果它具有＆＃34; banner＆＃34;的作用，我想要定位样式。我正在为主页编写样式，我的页面有不同的布局，所以我希望以前的样式不会应用到我的页面。

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

代码

这是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;
}