Question

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

出于某种原因，我的第二堂课没有覆盖我头一课的某些属性。作为一个实验，我尝试用两个背景颜色属性编写两个类，并且根据CSS中定义类的顺序，覆盖工作正常。但由于某些原因，我写的课不起作用。有人可以帮我这个吗？

.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等规范。它基本上是一种速记，但也是一种重置。

属性未在CSS文件中被覆盖

1 个答案: