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

Question

我正在开发一个 asp.net mvc-5 网络应用程序。我的共享 _layout View 中有以下内容:-

<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

属性选择器比类选择器具有更高的特异性。即使您的类选择器位于样式表的后面，它仍然会被文件中更高层的更具体的属性部分覆盖。

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

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

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

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

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

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

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

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