Question

我设置了角度应用程序，一切正常。我正在尝试添加一些自定义CSS输入，所以我创建了一个新文件my.css

.myInvalid {
    border: 5px solid red;
}

我已将该文件添加到我的index.html并且文件被加载但是当我写的时候 <input type="text" class="myInvalid"/>我的输入周围没有任何边框。

<!DOCTYPE html>

<html data-ng-app="MainApp">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="Scripts/angular.js"></script>

    <script src="Scripts/ui-bootstrap-0.4.0.js"></script>
    <script src="Scripts/ui-bootstrap-tpls-0.4.0.js"></script>
    <link href="Content/css/my.css" type="text/css" rel="stylesheet" />

    <link href="Content/assets/bootmetro/css/bootmetro.css" rel="stylesheet" />
    <link href="Content/assets/bootmetro/css/bootmetro-responsive.css" rel="stylesheet" />
    <link href="Content/assets/bootmetro/css/bootmetro-icons.css" rel="stylesheet" />
    <link href="Content/assets/bootmetro/css/bootmetro-ui-light.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.js"></script>

</head>
<body>
    <div class="container-fluid">
        <div data-ng-view=""></div>
    </div>
   <input type="text" class="myInvalid"/>
</body>
</html>

如果我在内联<input type="text" style="border: 5px solid red" />编写我的CSS，一切正常。所有浏览器的行为都是相同的。有什么想法吗？

Answer 1

您必须确保选择器比引导选择器更具体，

而不是.myInvalid使用input[type='text'].myInvalid

有关选择器优先级的详情，请查看this answer。

Answer 2

这听起来像specificity问题。您所包含的其他样式表是否为<input type="text">定义样式？如果您按如下方式定义样式块，我打赌您会看到红色边框：

.myInvalid {
    border: 5px solid red !important;
}

我不是说添加!important是解决方案，但如果它有效，您就会知道您的选择器（.myInvalid）不够具体，无法覆盖为此元素定义的其他样式。

您需要从浏览器中检查<input>并查看哪些样式声明与之匹配，并覆盖您尝试设置的属性。然后您可以相应地调整选择器。

使用bootstrap时自定义CSS无法正常工作

2 个答案: