CSS 嵌套 div 和属性继承

Question

我有一些 CSS 设置了几个更改 div 内部颜色的类，称为重音。口音类更改 div 的背景颜色、文本颜色和链接颜色。问题是，当重音 div 相互嵌套时，颜色开始相互覆盖，显示不正确。

Codepen here（使用 SASS）但以下是相关代码。基本上发生的情况是，当将一个或多个这些重音嵌套在彼此内部时，尝试为包装器内的元素定义颜色，例如锚标记 <a>，如果父重音的重音颜色（@987654323 @) 在儿童口音 (.accent-1) 样式之后输出，因为使用以下标记，.accent-4 a 也匹配 .accent-4 .accent-1 a。

HTML

<section class="wrapper">
  <div class="accent-4">

    <h3>Gradparent</h3>
    <p>Text should be white and <a>links</a> should be <a>white</a>.</p>

    <section class="wrapper">
      <div class="accent-2">

        <h3>Parent</h3>
        <p>Text should be black and <a>links</a> should be <a>blue</a></p>
        <p>But the <a>links</a> are <a>white</a></p>

        <section class="wrapper">
          <div class="accent-1">

            <h3>Child</h3>
            <p>Text should be white and <a>links</a> should be <a>white</a>.</p>

          </div>
       </section>
     </div>
   </section>
 </div>
</section>

CSS

.wrapper {
 display: inline-block;
 width: 100%; }

 .wrapper [class*="accent-"] {
  padding: 20px;
  width: 100%;
  display: inline-block; }

  .wrapper [class*="accent-"] p, .wrapper [class*="accent-"] a, .wrapper [class*="accent-"] h3 { color: inherit; }

.accent-1 {
 background-color #333;
 color: white; }
 .accent-1 a { color: white; }

.accent-2 {
 background-color #ccc;
 color: black; }
 .accent-2 a { color: blue; }

.accent-3 {
 background-color salmon;
 color: black; }
 .accent-3 a { color: white; }

.accent-4 {
 background-color blue;
 color: white; }
 .accent-4 a { color: white; }

.accent-5 {
 background-color white;
 color: black;}
 .accent-5 a { color: blue; }

如何确保口音始终具有正确的颜色并允许无限嵌套？

几个标准：

• 重音的颜色可能并不总是与示例中的颜色相同。这实际上是 sass mixin 的一部分，它将强调色作为参数。 （因此 codepen 中的颜色函数）。
• 我说的是无限嵌套，但 3 层可能就足够了。
• 我已经尝试过使用直接子选择器 (.accent-1 > p a)。这是一个简化的示例，在重音符号内部会有其他复杂元素，这些元素需要根据重音符号背景的颜色而有所不同。使用 > 选择器为 5 个重音中的每一个显式列出这些属性中的每一个都会产生大约 200KB 的额外 CSS
• 支持所有现代浏览器以及回到 IE8

Answer 1

您可以使用CSS variables 轻松做到这一点：

.accent-1, .accent-3, .accent-4 {
  --anchor-color: white;
}
.accent-2, .accent-5 {
  --anchor-color: #3488C9;
}
.accent-1 a, .accent-2 a, .accent-3 a, .accent-4 a, .accent-5 a {
  color: var(--anchor-color);
}

* {
  box-sizing: border-box;
}

a {
  color: #3488C9;
  text-decoration: underline;
}

.wrapper {
  display: inline-block;
  width: 100%;
}

[class*="accent-"] {
  padding: 20px;
  width: 100%;
  display: inline-block;
}
[class*="accent-"] p, [class*="accent-"] b, [class*="accent-"] strong, [class*="accent-"] i, [class*="accent-"] em, [class*="accent-"] blockquote,
[class*="accent-"] h1, [class*="accent-"] h2, [class*="accent-"] h3, [class*="accent-"] h4, [class*="accent-"] h5, [class*="accent-"] h6,
[class*="accent-"] ul, [class*="accent-"] ol, [class*="accent-"] li, [class*="accent-"] a {
  color: unset;
}

.accent-1 {
  background-color: #333;
  color: white;
  --anchor-color: white;
}
.accent-2 {
  background-color: #ccc;
  color: black;
  --anchor-color: #3488C9;
}
.accent-3 {
  background-color: salmon;
  color: black;
  --anchor-color: white;
}
.accent-4 {
  background-color: #2A4D68;
  color: white;
  --anchor-color: white;
}
.accent-5 {
  background-color: #fff;
  color: black;
  --anchor-color: #3488C9;
}
.accent-1 a, .accent-2 a, .accent-3 a, .accent-4 a, .accent-5 a {
  color: var(--anchor-color);
}

[class*="col-"] {
  float: left;
}

.col-2 {
  width: 50%;
}

.col-3 {
  width: 33.3333%;
}

.col-4 {
  width: 25%;
}

[class*="correct"] {
  color: #fff !important;
  padding: 3px 4px;
  border-radius: 3px;
  display: inline;
  font-size: 12px;
  font-weight: normal;
  vertical-align: middle;
}

.correct {
  background-color: green;
}

.incorrect {
  background-color: red;
}

em {
  font-size: 13px;
  opacity: 0.8;
}

<section class="wrapper">
  <div class="accent-1">
    <h3>Section A: Accent 1 <strong class="correct">CORRECT</strong> </h3>
    <p>In this section, text should be white and <a>links</a> should be <a>white</a>.</p>
    <p><em>All the styles in this section are correct because the parent div has a class of .accent-1, which is output before the rest of the accent styles, allowing them to override the parent's styles</em></p>
    <section class="wrapper">
      <div class="accent-2">
        <h3>Section A: Accent 2 <strong class="correct">CORRECT</strong> </h3>
        <p>In this section, text should be black and <a>links</a> should be <a>blue</a>.</p>
         <section class="wrapper">
           <div class="accent-3">
             <h3>Section A: Accent 3 <strong class="correct">CORRECT</strong> </h3>
               <p>In this section, text should be black and <a>links</a> should be <a>white</a>.</p>
           </div>
        </section>
      </div>
    </section>
  </div>
</section>

<section class="wrapper">
  <div class="accent-4">
    <h3>Section B: Accent 4 <strong class="correct">CORRECT</strong></h3>
   <p>In this section, text should be white and <a>links</a> should be <a>white</a>.</p>
    <section class="wrapper">
      <div class="accent-2">
        <h3>Section B: Accent 2 <strong class="correct">CORRECT</strong></h3>
         <p>In this section, text should be black and <a>links</a> should be <a>blue</a>.</p>
         <p><em>This is incorrect because blue .accent-4 comes after light-grey .accent-2 in the stylesheet and the elements inside this section are also children of a blue .accent-4 section (SectionB:accent-4)</em></p>
         <section class="wrapper">
           <div class="accent-1">
             <h3>Section B: Accent 3 <strong class="correct">CORRECT</strong></h3>
               <p>In this section, text should be white and <a>links</a> should be <a>white</a>.</p>
               <p><em>This is only correct because the colors for the blue parent section (SectionB:Accent4) are being applied and  are the same.</em></p>
           </div>
        </section>
      </div>
    </section>
  </div>
</section>

<section class="wrapper">
  <div class="accent-1">
    <h3>Section C: Accent 1 <strong class="correct">CORRECT</strong> </h3>
    <p>In this section, text should be white and <a>links</a> should be <a>white</a>.</p>
    <p><em>All the styles in this section are correct because the parent div has a class of .accent-1, which is output before the rest of the accent styles, allowing them to override the parent's styles</em></p>
     <section class="wrapper col-4">
      <div class="accent-5">
        <h3>Section C: Accent 5</h3>
        <strong class="correct">CORRECT</strong>
        <p>In this section, text should be black and <a>links</a> should be <a>blue</a>.</p>
      </div>
    </section>
    <section class="wrapper col-4">
      <div class="accent-2"> 
        <h3>Section C: Accent 2</h3>
        <strong class="correct">CORRECT</strong>
        <p>In this section, text should be black and <a>links</a> should be <a>blue</a>.</p>
      </div>
    </section>
    <section class="wrapper col-4">
      <div class="accent-3"> 
        <h3>Section C: Accent 3</h3>
        <strong class="correct">CORRECT</strong>
        <p>In this section, text should be black and <a>links</a> should be <a>white</a>.</p>
      </div>
    </section>
    <section class="wrapper col-4">
      <div class="accent-4"> 
        <h3>Section 3: Accent 4</h3>
        <strong class="correct">CORRECT</strong>
        <p>In this section, text should be white and <a>links</a> should be <a>white</a>.</p>
      </div>
    </section>
  </div>
</section>

<section class="wrapper">
  <div class="accent-4">
     <h3>Section D: Accent 4 <strong class="correct">CORRECT</strong></h3>
     <p>In this section, text should be black and <a>links</a> should be <a>white</a>.</p>
     <section class="wrapper col-4">
      <div class="accent-5">
         <h3>Section D: Accent 5</h3>
        <strong class="correct">CORRECT</strong>
        <p>In this section, text should be black and <a>links</a> should be <a>blue</a>.</p>
        <p><em>This is correct because the styles for .accent-5 are output after the styles for the parent div with .accent-4 class</em></p>
      </div>
    </section>
    <section class="wrapper col-4">
      <div class="accent-3"> 
        <h3>Section D: Accent 3</h3>
        <strong class="correct">CORRECT</strong>
        <p>In this section, text should be black and <a>links</a> should be <a>white</a>.</p>
      </div>
    </section>
    <section class="wrapper col-4">
      <div class="accent-2"> 
        <h3>Section D: Accent 2</h3>
        <strong class="correct">CORRECT</strong>
        <p>In this section, text should be black and <a>links</a> should be <a>blue</a>.</p>
        <p><em>Once again, this is incorrect because the styles for the .accent-2 class are output before the styles for the .accent-4 class of the parent wrapper.</em></p>
      </div>
    </section>
    <section class="wrapper col-4">
      <div class="accent-1"> 
        <h3>Section D: Accent 1</h3>
        <strong class="correct">CORRECT</strong>
        <p>In this section, text should be white and <a>links</a> should be <a>white</a>.</p>
        <p><em>And again, this is only correct because the foreground colors for .accent-4 happen to be the same as .accent-1</em></p>
      </div>
    </section>
  </div>
</section>

但请注意，目前有小型浏览器支持。