css - 在 CSS 中选择最内部的等效规则

Question

在引导程序中有这个 mixin 可以创建各种背景颜色类。我对其进行了修改以自动更改文本颜色。由于此更改仅应用于具有该类的同一元素，因此我添加了一个巨大的选择器，该选择器选择父类中的所有标题和段落来修复颜色。

@mixin bg-variant($parent, $color) {
 #{$parent} {
  background: $color !important;
  color: color-yiq($color);

  p, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3 {
   &:not(.input-group-text) {
    color: color-yiq($color);
   }
  }
 }
}

还有第二个 mixin，但用于渐变，称为 bg-gradient-variant。

但是当我有以下代码结构时会出现问题：

<div class="bg-gradient-success">
 <div class="bg-secondary">
  <p>Some text</p>
 </div>
</div>

该段落获得bg-gradient-success的颜色，而不是bg-secondary，因为渐变 mixin 是在普通 mixin 之后定义的。更改此顺序可修复此情况，但会破坏其他情况。有没有办法自动增加内部类中的特异性（不是一种骇人听闻的使用方式）以使颜色适合最内部类？

标签： csstwitter-bootstrap