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

如何嵌套SCS以仅当其具有

role=“banner”

时才将样式应用于

，但如果标题具有

page frontpage

类，则不能应用样式。然后我会将特定页面的样式嵌套在其中

背景 我正在添加到其他人的代码中，因此不允许覆盖编写的第一个样式。我认为如果在其他地方使用标题可能会有问题，因此如果标题具有“横幅”角色，我希望针对样式。我正在为主页编写样式，而我的页面具有不同的布局，因此我不希望以前的样式应用于我的页面

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

代码 这是

HTML 该类根据正在查看的页面传递到标题中

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

迄今修改

header[role=banner] {

给你：

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

---

好的，我坚持的部分是，如果最好（“更干净”）将

.page frontpage

的样式嵌套在其中，或者如果我应该将样式作为

标题[role=“banner”]{&.page frontpage{}

写在下面，如果我是对的，您希望标题[role=“banner”]具有特定的样式然后为不在首页上的相同元素添加一些附加样式？在这种情况下，您可以通过在首页添加&来嵌套：not（.page frontpage）：

和：not（.page frontpage）

。但我不认为筑巢是特别干净的事情。毕竟，css输出是相同的。我同意。我最终只是限制了他们的风格，如上图所示。然后写了另一套规则。现在一切正常。谢谢你的帮助，谢谢。

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