css - 将附加类添加到元素时覆盖属性值

Question

我一直认为，如果像我这样在前一个属性之后定义一个属性，它会覆盖以前的值。但由于某些原因，在使用 input[type=button] 时情况并非如此。

但是，当将 input[type=button] 更改为 .btn 类时，值会覆盖之前的值，这是为什么呢？有没有不使用 !important 的解决方法？

input[type=button] {
  color: red;
  background-color: transparent;
}

.accent {
  color: white;
  background-color: blue;
}

<input type="button" value="Hello" class="accent">

Answer 1

这是因为 input[type=button] 比类更具体。您可以通过将类添加到 input 来解决此问题。

input[type=button] {
  color: red;
  background-color: transparent;
}

input.accent {
  color: white;
  background-color: blue;
}

<input type="button" value="Hello" class="accent">