替换box-shadow

Question

我的页面中按此顺序获得了2个.css文件

<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="calib.css">

在main.css中我有

input[type="button"]{
  box-shadow: 0 0px 10px blue;
}

在calib.css中我已经

了

.btn-active{
  box-shadow: 0 0px 10px red;
}

在HTML中我放了这些元素

<input type="button" class="btn-active" value="Button 1">
<input type="button" class="" value="Button 2">

但是按钮1中的盒子阴影的颜色仍为蓝色。

有没有办法在不使用输入[type =＆＃34; button＆＃34;]内容创建新类的情况下替换CSS属性值？

谢谢！

Answer 1

无需使用!important。使用input.btn-active代替

input[type="button"]{
  box-shadow: 0 0px 10px blue;
}
input.btn-active{
  box-shadow: 0 0px 10px red;
}

<input type="button" class="btn-active" value="Button 1">
<input type="button" class="" value="Button 2">

Answer 2

> .btn-active{
  box-shadow: 0 0px 10px red !important;
}

或

input.btn-active{
  box-shadow: 0 0px 10px red;
}

Answer 3

您应该更具体地指定选择器。

您可以使用input.btn-active并保持指定css的方式相同。

input[type="button"] {
  box-shadow: 0 0 10px blue;
}

input.btn-active {
  box-shadow: 0 0 10px red;
}

<form>
  <input type="button" class="btn-active" value="Button 1">
  <input type="button" class="" value="Button 2">
</form>

如果您想更具体地使用input[type="button"].btn-active。这样指定它也会起作用：

input[type="button"].btn-active {
  box-shadow: 0 0 10px red;
}

input[type="button"] {
  box-shadow: 0 0 10px blue;
}

<form>
  <input type="button" class="btn-active" value="Button 1">
  <input type="button" class="" value="Button 2">
</form>