Fatal编程技术网
  • html/
  • Html 如何用默认配置覆盖CSS？

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

html css angularjs

Html 如何用默认配置覆盖CSS？,html,css,angularjs,Html,Css,Angularjs,在一个名为first.css的文件中，有很多我需要的css，但这是一个css，我不需要，正如这里看到的，但似乎正在应用到我的输入： 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 rgb

在一个名为first.css的文件中，有很多我需要的css，但这是一个css，我不需要，正如这里看到的，但似乎正在应用到我的
输入
：

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元素留空的原因。任何帮助都将不胜感激。谢谢。
在first.css之后加载second.css


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



尝试在
second.css
中为
box shadow
属性使用
none
值，只需将新属性添加到
second.css
即可覆盖
first.css的css样式




.myDiv{
高度：100px；
宽度：100px；
背景色：红色；
}
myDiv先生{
背景颜色：蓝色；
}


尝试使用“！“重要”关键字：如果您在第一个之后包含第二个，那么“重要”不应该是必需的。@Nestoraj您是说只包含！在第二个.css值中很重要？这并不能回答这个问题。若要评论或要求作者澄清，请在其帖子下方留下评论。-@乔斯特：这是一个答案。请仔细阅读，并指定我们应该在LQP审查队列中删除哪个答案，我们应该放弃什么，我们应该保留什么。

.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'
}