gpt4 book ai didi

css - 使用 Bootstrap 时自定义 CSS 不起作用

转载 作者:太空宇宙 更新时间:2023-11-03 18:40:33 24 4
gpt4 key购买 nike

我已经设置好 Angular 应用程序,一切正常。我正在尝试向输入添加一些自定义 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" />一切正常。该行为在所有浏览器中都是相同的。有什么想法吗?

最佳答案

你必须确保你的选择器比 Bootstrap 选择器更具体,

代替 .myInvalid 使用 input[type='text'].myInvalid

查看 this answer有关选择器优先级的更多信息。

关于css - 使用 Bootstrap 时自定义 CSS 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17720567/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com