CSS是从CSS文件中的最后一个对象而不是最近的父对象应用的

Question

我正在构建一个基本上由部分+行+列组成的网站，并且每个元素都可以应用颜色方案。

如果颜色方案应用于该部分，其中的所有行和列将具有相同的颜色方案，但是，有时我想要将颜色方案添加到单个列以区分它，但在某些情况下父颜色方案颜色scheme css放在列的颜色方案css之后（在css文件中），然后它应用部分的颜色而不是列。

这是代码（为了举例简化）。

我可以在特定情况下解决它，使用！important，但我正在寻找一个全局解决方案。

CSS：

     /* Grey */
     .color-scheme-grey button {
         background-color: #666666;
         color: #ffffff;
     }    

     /* Blue */
     .color-scheme-blue button {
         background-color: blue;
         color: #ffffff;
     }    

HTML：

    <div class="section color-scheme-blue">
         <div class="row">
             <div class="column color-scheme-grey">
                 <button>I am blue, but I wish I was grey!</button>
             </div>
         </div>
    </div>

谢谢！

Answer 1

这是Cascade Precedence直接导致的预期行为。

如果两个规则具有相同的权重或特异性，则最后声明的规则总是胜出并且超过另一个规则。

使用更多特异性

考虑在已指定的上下文选择器范围内声明另一个元素或类选择器。

例：

添加了元素选择器（div）以获得更多特异性......

div.color-scheme-grey button { ... }

添加了一个类选择器（.section）以获得更多特异性......

.section .color-scheme-grey button { ... }

代码片段演示：

1.附加类选择器：

/* Grey */

.section .color-scheme-grey button {
  background-color: #666666;
  color: #ffffff;
}


/* Blue */

.color-scheme-blue button {
  background-color: blue;
  color: #ffffff;
}

<div class="section color-scheme-blue">
  <div class="row">
    <div class="column color-scheme-grey">
      <button>I am blue, but I wish I was grey!</button>
    </div>
  </div>
</div>

2.附加元素选择器：

/* Grey */

div.color-scheme-grey button {
  background-color: #666666;
  color: #ffffff;
}


/* Blue */

.color-scheme-blue button {
  background-color: blue;
  color: #ffffff;
}

<div class="section color-scheme-blue">
  <div class="row">
    <div class="column color-scheme-grey">
      <button>I am blue, but I wish I was grey!</button>
    </div>
  </div>
</div>

有关CSS特异性的更多信息：

1. Specificity - CSS | MDN
2. Specifics on CSS Specificity | CSS Tricks

Answer 2

如下所示应用父母的样式。

.section .color-scheme-grey button {
     background-color: #666666;
     color: #ffffff;
 }

DEMO

Answer 3

您可以增加规则的特异性来抵消文件的顺序：

 /* Grey */
 .color-scheme-grey button {
     background-color: #666666;
     color: #ffffff;
 }    

 /* Blue */
 .color-scheme-blue button {
     background-color: blue;
     color: #ffffff;
 }    

 .color-scheme-blue .color-scheme-grey button {
    background-color: #666666;
 }

但是，你需要小心这一点，因为它可以很快地与所有组合失控！

更好的方法是组织一组格式，适用于行/部分和单独的列，并在文件中适当地组织它们（首先是部分）。