html - CSS - 调用 element[attribute^=value] 后未应用 border-X-color 的原因

Question

我有以下标记:

HTML

 <article class="card big-number border-green">     
   <p class="number">5</p>
  </article><!-- /card-two -->

CSS

article[class^='border-'], article[class*=' border-'] {
    border-left : 1px solid ;
}

.border-yellow {
   border-left-color: yellow;
}
.border-green {
       border-left-color:  green;
}
.border-blue {
      border-left-color:  blue;
}
.border-red {
      border-left-color:  red;
}

问题是没有应用颜色，除非我这样指定元素:

article.border-red {
          border-left-color:  red;
    }

我知道我可以使用像

这样的包罗万象的规则来解决它

[class^='border-'], [class*=' border-']

但问题的原因是我非常想了解该行为的原因。 'border-color' 是否被视为包含此类的任何元素的规则(在我的例子中包括 'article' ..)并具有已声明的边框属性？

在 Chrome、Firefox 上测试。

Answer 1

编辑:
好的，这里真正的问题是 border-left-color 被 border-left : 5px solid; 的值覆盖(即 currentColor )。

为什么？这里的罪魁祸首是

article[class^='border-'], article[class*=' border-'] {
    border-left : 1px solid ;
}

具有更高的specifity 比 .border-green
参见 Specificity Calculator .

---

原因是border-left : 1px solid;将边框颜色设置为 currentColor (黑色)每篇文章。
这会否决 .border-green 类的 border-left-color。
请注意将 !important 添加到 .border-green 是如何改变输出的。

article[class^='border-'], article[class*=' border-'] {
    border-left : 5px solid ;
}

.border-yellow {
   border-left-color: yellow;
}
.border-green {
       border-left-color:  green !important;
}
.border-blue {
      border-left-color:  blue;
}
.border-red {
      border-left-color:  red;
}

 <article class="card big-number border-green">     
   <p class="number ">5</p>
  </article><!-- /card-two -->