CSS - причина, по которой цвет border-X не применяется после вызова элемента [attribute ^ = value]

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' в моем случае ...) и имеет объявленное свойство border?

Протестировано на Chrome, Firefox.

Answer 1

Редактировать:
Хорошо, поэтому реальная проблема заключается в том, что border-left-color переопределяется значением из border-left : 5px solid; (то есть currentColor ).

Почему?Преступник здесь

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

, у которого выше специфичность чем .border-green
См. Калькулятор специфичности .

---

Причина в том, что border-left : 1px solid; устанавливает цвет границы currentColor (черный) для каждой статьи.
Этоотменяет border-left-color класса .border-green.
Обратите внимание, как добавление !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 -->