如何使用默認配置覆蓋CSS？
[英]How to override CSS with default configurations?
問題描述
在一個名為first.css的文件中，我需要很多CSS，但這是我不需要的CSS，但似乎已應用到我的input ：
first.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;
}
我基本上不希望CSS不適用於我的輸入表單，所以我做這樣的事情：
second.css：
.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
}
second.html：
<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 first.css的應用？ 我只是想應用默認配置（無論它們是什么），而不是上面的配置，這就是為什么我將second.css css元素留空的原因。 任何幫助，將不勝感激。 謝謝。
3 個解決方案
解決方案1
2 2016-09-21 08:15:02
在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'
}
解決方案2
0 2016-09-21 08:15:26
嘗試對second.css box-shadow屬性使用none值
解決方案3
0 2016-09-21 08:16:52
只需向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屬性為默認值？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.