Question

在一个名为first.css的文件中，我需要很多CSS，但这是我不需要的一块CSS，如此处所示，但似乎已应用于我的{{1} }：

first.css：

input

我基本上不希望CSS不适用于我的输入表单，所以我做了类似的事情：

second.css：

.ng-invalid :not(.ng-valid)>.form-control {
  border-color: #b94a48;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.ng-invalid :not(.ng-valid)>.form-control:focus {
  border-color: #953b39;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}

second.html：

.ng-invalid :not(.ng-valid)>.form-control input {
  //I simply want the default CSS to apply, and not that from first.css
}

.ng-invalid :not(.ng-valid)>.form-control:focus input {
      //I simply want the default CSS to apply, and not that from first.css
}

有没有办法简单地阻止first.css中的CSS应用？我只想要应用默认配置（无论它们是什么），而不是上面的原因，这就是我将<form style="margin-top: 10px" name="configurationForm" ng-class="{'submitted': submitted}" ng-submit="createConfiguration(configurationForm.$valid)" novalidate> <div class="form-group row" ng-class="{'has-error': configurationForm.name.$invalid && !configurationForm.name.$pristine && submitted }"> <label for="name" class="col-xs-1 col-form-label">Name</label> <div class="col-xs-11"> <input name="name" style="font-size: 10px; border-radius: 4px !important;" type="text" class="form-control" placeholder="Name" ng-model="configuration.name" required /> </div> </div> ... <More form-control> ... </form> css元素留空的原因。任何帮助，将不胜感激。感谢。

Answer 1

在first.css之后加载second.css

<head>
   <link rel="stylesheet" type="text/css" href="first.css">
   <link rel="stylesheet" type="text/css" href="second.css">
</head>

然后在第二个css中将这些样式重置为none。但看起来边框颜色似乎不具有none值，因此您可以尝试transparent

.ng-invalid :not(.ng-valid)>.form-control input {
  border-color: 'transparent';
  -webkit-box-shadow: 'none';
          box-shadow: 'none';

}

.ng-invalid :not(.ng-valid)>.form-control:focus input {
      border-color: 'transparent';
  -webkit-box-shadow: 'none';
          box-shadow: 'none'
}

Answer 2

尝试在none

中使用box-shadow属性的second.css值

Answer 3

只需向second.css添加新属性即可覆盖first.css的CSS样式 https://jsfiddle.net/vLhuowss/

.myDiv {
	height: 100px;
	width: 100px;
	background-color: red;
}

.myDiv {
	background-color: blue;
}

<div class="myDiv"></div>

如何使用默认配置覆盖CSS？

3 个答案: