我的asp.net mvc-5中的自定义site.css没有覆盖内置样式

Question

我正在开发一个asp.net mvc-5 Web应用程序。我在共享的_layout视图中有以下内容： -

<link id="bs-css" href="~/Content/css/bootstrap-cerulean.css" rel="stylesheet">

<link href="~/Content/css/charisma-app.css" rel="stylesheet">
<link href="~/Content/css/bootstrap-responsive.css" rel="stylesheet">
<link href="~/Content/start/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
@Styles.Render("~/Content/templete")

所以主要是我首先引用内置的bootstrap .css文件，然后我引用包含我们的site.css的包@Styles.Render("~/Content/templete")。所以这意味着site.css应该覆盖内置的.css文件，因为我之后引用了site.css ......

现在我遇到的问题是我在site.css中定义了以下样式： -

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

如果输入有任何验证错误，则显示红色寄存器。现在在我的应用程序中，我不会得到如下错误的行为： -

如图所示，与下拉字段不同，输入字段不会有任何红色边框。现在如firebug所示，bootstrap-cerulean.css中定义的以下css规则将覆盖site.css样式（虽然我在bootstrap-cerulean.css之后引用site.css）： -

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    color: #555555;
    display: inline-block;
    font-size: 13px;
    height: 18px;
    line-height: 18px;
    margin-bottom: 9px;
    padding: 4px;
}

所以有人可以尝试如何强制这种风格，以便对输入字段产生预期效果吗？

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

Answer 1

属性选择器比类选择器具有更高的特异性。即使您的类选择器稍后位于样式表中，它仍然会被文件中较高的特定属性扇区覆盖。

＆＃13;

＆＃13;

input[type=text] {
  background: #FFF;
  border: 1px solid #DDD;
}

.error {
  background: rgba(255,0,0,0.3);
  border: 1px solid #F88;
}

＆＃13;

<input class="error" type="text">

＆＃13;

＆＃13;

＆＃13;

尝试将属性部分添加到错误类中以增加其特异性。

＆＃13;

＆＃13;

input[type=text] {
  background: #FFF;
  border: 1px solid #DDD;
}

input[type=text].error {
  background: rgba(255,0,0,0.3);
  border: 1px solid #F88;
}

＆＃13;

<input class="error" type="text">

＆＃13;

＆＃13;

＆＃13;

我还没读过，但这篇文章看起来很不错：https://css-tricks.com/specifics-on-css-specificity/