CSS 嵌套 : inherit from whom?

Question

这里有一个小问题:
https://jsfiddle.net/c2exs2f7/3/

第二个“蓝色”如何保持与第一个实例(它应该是 color: white)而不更改 HTML 结构？

HTML

<div class="blue">
  <div class="content">
    <div class="label">blue</div>
    <div class="yellow">
      <div class="content">
        <div class="label">yellow</div>
        <div class="blue">
          <div class="content">
            <div class="label">blue</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

// Skip until...

div {
  border-radius: .25em;
  padding: .5em;
  font-family: helvetica, sans-serif;
}

// ...here:

.blue {
  background-color: hsl(220,100%,50%);

  .content {
    color: white;
  }
}

.yellow {
  background-color: hsl(60,100%,50%);

  .content {
    color: hsl(0,0%,10%);
  }
}

编辑#1感谢你们的快速回复!
我在一个网格系统上工作，我可以在其中嵌套不同的网格系统(具有不同的 CSS 值)。

Answer 1

选择器 .yellow .content 和 .blue .content 具有相同的 specificity (在本例中为 20)，因此由于样式表的级联特性，样式表中稍后出现的选择器将覆盖第一个选择器。在这种情况下，选择器 .yellow .content 覆盖了 .blue .content，这就是嵌套的 .blue 元素为黑色的原因。

一个快速的解决方案是使用选择器 .blue .blue 选择嵌套的 .blue 元素:

Updated Example

.blue,
.blue .blue {
    background-color: hsl(220,100%,50%);

    .content {
        color: white;
    }
}

一个可以说更好的方法是使用 child selector, > 只选择直接 .content 子元素。 :

Updated Example

.blue {
    background-color: hsl(220,100%,50%);

    > .content {
        color: white;
    }
}

.yellow {
    background-color: hsl(60,100%,50%);

    > .content {
        color: hsl(0,0%,10%);
    }
}

根据您的评论，元素的排序/分层可能会有所不同。另一种解决方案是在 .blue/.yellow 元素上设置 color 属性，然后设置 color 要继承的子元素的属性:

Updated Example - 这似乎适用于所有变体。

.blue {
    background-color: hsl(220,100%,50%);
    color: white;

    .content {
        color: inherit;
    }
}

.yellow {
    background-color: hsl(60,100%,50%);
    color: hsl(0,0%,10%);

    .content {
        color: inherit;
    }
}