Question

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

第二个＆＃34;蓝色＆＃34;保持第一个实例（它应该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%);
    }
}

根据您的评论，元素的排序/分层可能会有所不同。另一种解决方案是在color / .blue元素上设置.yellow属性，然后将子元素的color属性设置为inherit：< / p>

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/

我所做的只是为分类为DIV的孩子content强制继承，而不是整个后代。

在SCSS中应用直接子操作符>会使.content div仅考虑其直接父颜色。

继续尝试嵌套更多DIV s，你会发现它有效。

Answer 3

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

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

你不需要“.content”包装器。

Answer 4

我遇到了同样的问题，即HTML嵌套有所不同，因此由于过于复杂和非DRY代码而无法进行更具体的选择器。

这是我来到的解决方案：

https://jsfiddle.net/cg0u8v1s/

基本上，系统地使用类名称是关键，因此您可以可靠地使用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嵌套：继承谁？

4 个答案: