CSS嵌套：从谁那里继承？

这里是一个问题的小摆设：

第二个蓝色如何保持与第一个实例相同的颜色：白色，而不改变HTML结构

HTML

编辑1 谢谢你们的快速回复！ 我在一个网格系统上工作，我可以用不同的CSS值嵌套不同的网格系统。

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

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

可以说更好的方法是仅使用以下选项选择direct.content子元素：

根据您的意见，元素的顺序/分层可能会有所不同。另一种解决方案是在.blue/.yellow元素上设置color属性，然后将子元素的color属性设置为继承：

-这似乎适用于所有车型

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

看

我所做的只是对子内容分类的DIV强制执行继承，而不是对整个后代

在SCS中应用即时子操作符> .DIVE DIV只考虑它的直接父颜色。

---

继续尝试嵌套更多的div，您将看到它是有效的。

您不能。不管怎么说，都不是天生的。因为第二个蓝色是由黄色固有的。所以，如果你想要所有的蓝色总是有白色字母和黄色总是黑色字母。为什么不干脆说：

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

---

而且您不需要.content包装器

我也遇到过同样的问题，HTML嵌套不同，因此由于极其复杂和非干性代码，不可能生成更具体的选择器

以下是我得出的解决方案：

基本上，系统化的类名方法是关键，因此您可以可靠地使用CSS属性选择器，尽管我建议使用比颜色更独特的命名约定，因为它太通用了

例如：

这将输出选择器，使嵌套更加具体，无需非干代码或使用！重要的

CSS输出如下所示：

---

拥有一个JSFIDLE是一个很好的补充，但是您应该始终在问题本身中包含重要的部分。一个问题和一个答案应该始终是自包含的，因为外部链接可能会变得无效。Ok。非常感谢。我对此很陌生：我喜欢第一种方法，但如果HTML标记为黄色>黄色>蓝色，它将不起作用。有没有更好的方法来实现这一点，而不宣布在一个特定的顺序混合蓝色和黄色的每一种可能性？第二个使用子选择器的例子对于这个简单的例子来说很好，但我不确定我是否能保证母子之间不会有层div。这是一个很好的新解决方案。有没有类似的方法来实现我的目标而不付出。蓝色是白色的颜色？如果我有一个网格系统，你的这个解决方案就不会那么好了。在你的例子中，.blue和.yellow得到一种颜色是可以的。如果在我的实际项目中，像.row这样的父级获取.column width属性的值，那就不好了。这是个好主意。我的问题是我的代码是网格系统的简化。

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

    .content {
        color: white;
    }
}

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

    > .content {
        color: white;
    }
}

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

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

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

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

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

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