CSS嵌套：继承自谁？

Question

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

第二个 "blue" 如何保持与第一个实例（它应该有 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

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

一个快速的解决方案是 select 嵌套 .blue 元素与 select 或 .blue .blue:

Updated Example

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

    .content {
        color: white;
    }
}

一个可以说更好的方法是仅 select 使用 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%);
    }
}

根据您的评论，元素的 ordering/layering 可能会有所不同。另一种解决方案是在 .blue/.yellow 元素上设置 color 属性，然后设置子元素的 color 属性到 inherit:

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

Answer 2

见https://jsfiddle.net/c2exs2f7/4/

我所做的是仅对 child content 分类 DIV 强制继承，而不是整个后代。

在 SCSS 中应用直接 children 运算符 > 使 .content div 仅考虑其直接 parent 颜色。

继续尝试嵌套更多 DIVs，您会发现它有效。

Answer 3

你不能。反正不是固有的。因为第二个蓝色将继承自黄色。所以如果你想要所有蓝色总是有白色字母和黄色总是黑色字母。为什么不直接放：

.blue { color: #fff; }
.yellow { color: hsl(0,0%,10%); }

而且您不需要“.content”包装器。

Answer 4

我遇到了同样的问题，其中 HTML 嵌套各不相同，因此由于极其复杂和非 DRY 代码，无法制作更具体的选择器。

这是我得出的解决方案：

https://jsfiddle.net/cg0u8v1s/

基本上，class 名称的系统方法是关键，因此您可以可靠地使用 CSS 属性选择器（尽管我建议使用比 "color-" 更独特的命名约定因为它太笼统了。)。

示例：

.color-blue {
  &,
  [class*="color-"] &,
  [class*="color-"] [class*="color-"] & {// Only needed if you want a 3rd level of nesting to work.
    background-color: blue;

    .content {
      color: skyblue;
    }
  }
}

.color-yellow {
  &,
  [class*="color-"] &,
  [class*="color-"] [class*="color-"] & {// Only needed if you want a 3rd level of nesting to work.
    background-color: yellow;

    .content {
      color: brown;
    }
  }
}

这将输出通过嵌套变得更加具体的选择器，而不需要非 DRY 代码或必须使用 !important。

CSS 输出将如下所示：

.color-blue,
[class*="color-"] .color-blue,
[class*="color-"] [class*="color-"] .color-blue {
  // code...
}

CSS嵌套：继承自谁？

CSS nesting: inherit from whom?

css

inheritance

nested