Jquery 如何将HTML中更改的元素的相同样式应用于不更改的元素'；在HTML中不改变吗？

我需要将此HTML从

fullwidth-header

更改为

fullwidth-header2

，然后更改为

fullwidth-header3

、4、5、6等等

<div class="fullwidth-header">
      <div class="container custom-container">
            <div class="fullwidth-header-block">
                Residents
                  <p>Manage your home utility account.</p>
            </div>
      </div>
</div>

它现在是绿色的。我需要它是蓝色的（基本上，它应该与fullwidth header、2、3、4等具有相同的背景，具体取决于HTML中的哪个fullwidth header）

如果你检查画笔，你会发现当HTML从fullwidth标题更改为fullwidth-header2时，背景不匹配

如何实现“匹配”背景和小方框，而不必更改HTML中除全宽标题之外的任何内容

我正在寻找任何解决方案，CSS或jQuery。最好是CSS。

在您的CSS中，您有：

.notch-nav .current a:before, .fullwidth-header4 {
    background: green;
}

这与写作是一样的：

.notch-nav .current a:before {
    background: green;
}

.fullwidth-header4 {
    background: green;
}

换句话说，这两种样式声明实际上没有任何联系。这就是为什么

.notch nav a

东西将始终是您在CSS中声明的最后一种颜色（一直覆盖以前的颜色）

--

此时您有两个主要选项：

1） 通过Javascript更改颜色（在这里编写香草JS，但很容易翻译成JQuery），即：

2） 重新构造HTML，使.notch nav嵌套在标识父项的内部，即：

<div class="fullwidth-header header2">
  <div class="notch-nav"></div>
</div>

我个人建议稍微重新构造HTML（选项2），而不是添加脚本来执行此操作。

我应用了您的选项2建议。工作得很好。感谢您提供如此简单的解决方案。：）

document.querySelector('.notch-nav .curent a:before').style.background = document.querySelector('.fullwidth-header').style.background

<div class="fullwidth-header header2">
  <div class="notch-nav"></div>
</div>

.header2 .notch-nav { /* something */ }
.header3 .notch-nav { /* something else */ }
... etc.