1

我已经设置了我的角度应用程序，并且一切正常。我正在尝试添加一些自定义 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>

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

4

2 回答 2

1

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

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

查看此答案以了解有关选择器优先级的更多信息。

于 2013-07-18T12:01:27.210 回答
-1

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

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

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

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

于 2013-07-18T12:01:33.920 回答