html中的CSS类被类重写，而不是在html中

Question

我对代码的情况感到困惑，我试图影响列表的外观，具体取决于父类。我目前为2个不同的父母有两种不同的外观。但是，当在HTML中编写1个父类时，我不会得到那个外观，而是只获得CSS中的另一个类。

我已经研究了特异性和级联，我对两者都有一个很好的理解。根据我的知识，我认为我的代码应该在编写时工作，无论CSS中的级联或顺序如何。从我收集的内容来看，我的类规则集具有相同的特性但是父类不同，我认为父类将被应用，而不会被CSS中的后续父类覆盖。

＆＃13;

＆＃13;

.bg-brown .listing-article li {
  border: 1px #a37457 solid;
}

.bg-blue .listing-article li {
  border: 1px #729bad solid;
}

＆＃13;

<section class="bg-brown">
  <div>
    <ul class="listing-article">
      <li>
        <h2>Article Title</h2>
        <div>
          <p>Summary Text</p>
        </div>
        <div>
          <ul>
            <li>Published: </li>
            <li>Categories: </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

所以我用bg-brown得到的是一个蓝色边框不是棕色的列表。我想知道的是，为什么.bg-blue优先于.bg-brown而不是在HTML中被调用？

更令人困惑的是，当我在.bg-brown之前将.bg-blue放入他们正常工作的CSS中时，即使我在HTML中将HTML类从棕色切换为蓝色也是如此。我认为它会产生相同的结果只是一个棕色边框而不是蓝色。