替换盒子阴影

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

但是 Button 1 中的 box-shadow 的颜色仍然是蓝色。

有没有办法用输入[type="button"]内容替换CSS属性值而不创建新的class？

谢谢！

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>

Replace box-shadow