实际特异性

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">

Answer 2

在html标记之上包含html属性是一个比类更精确的选择器，这就是它在css中获得优先级的原因。因此，您可以使用input.accent优化选择器，它将覆盖。

Answer 3

我一直认为，如果在之前的属性[...]之后定义了一个属性，它将覆盖之前的值。

只有这些选择器具有相同的特异性时才会出现这种情况。

subprocess.check_output('tail...', shell=True)

想象

input[type=button] /* specificity = 11 */
.accent /* specificity = 10 */

每个选择器都有他的分数，这些分数在组合时可以总结。

如果必须提高选择器的特异性，还有一个很好的“黑客”：

<input type="button" id="id" class="class">

#id {}
.class {} /* will of course never ever override #id */
#id.class {} /* will override as well */

.class {} will be overridden by .class.class {}

input[type=button] {
  color: red;
  background-color: transparent;
}

.accent.accent {
  color: white;
  background-color: blue;
}

BTW 我记得有一个非常好的网站，你可以准确地读出每个选择器有多少分（id最强）但我再也找不到资源......

修改

计算特异性

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

参考：https://www.w3.org/TR/css3-selectors/#specificity

计算特异性