html - 属性不会在 CSS 文件中被覆盖

Question

我正在尝试为我的按钮对象创建一个通用类，并仅覆盖另一个类中的一些属性，例如.shopping_cart_btn。

出于某种原因，我的第二堂课没有覆盖我第一个类的某些属性。作为一项实验，我尝试只使用一个背景色属性编写这两个类，并且根据类在 CSS 中定义的顺序重写效果很好。但出于某种原因，我写的类(class)不起作用。有人可以帮我解决这个问题吗？

.button {
  display: block;
  background-color: #ffec64;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
  color: #333333;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  padding: 10px 30px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #ffee66;
  border-radius: 6px;
  border: 1px solid #ffaa22;
  margin: auto;
}

.button:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
  background-color: #ffab23;
}

.button:active {
  position: relative;
  top: 1px;
}

<button class='button shopping_cart_btn' id="shoppingCart-btn">Shopping Cart</button>

Answer 1

它似乎覆盖了我，以此为例:

.button {
  display: block;
  background-color: #ffec64;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
  color: #333333;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  padding: 10px 30px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #ffee66;
  border-radius: 6px;
  border: 1px solid #ffaa22;
  margin: auto;
}

.button:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
  background-color: #ffab23;
}

.button:active {
  position: relative;
  top: 1px;
}

.shopping_cart_btn {
  color: #fff;
  background: green;
}

.shopping_cart_btn:hover {
  background: blue;
}

.shopping_cart_btn:active {
  background: pink;
}

<button class='button shopping_cart_btn' id="shoppingCart-btn">Shopping Cart</button>

<button class='button'>Regular button</button>

如果问题特别是 background-color，则 background 将取代所有以前的 background-color、background-image 等规范。它基本上是一个速记，但也是一个重置。