我在我的网站上使用Bootstrap CSS并在<head>元素中加载。在加载boostrap的下面，我有一个<style>元素试图在引导中覆盖一些CSS，但是当我查看Chrome Dev Inspector时，它并没有覆盖它。我认为element中的元素应该级联以前的元素？
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Women's Transit</title>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" type="text/javascript" />-->
<link rel="stylesheet" href="/CS483-Final/content/bootstrap/css/bootstrap-responsive.css" type="text/css" />
<link rel="stylesheet" href="/CS483-Final/content/bootstrap/css/bootstrap.css" type="text/css" />
<style type="text/css">
/* Global elements */
input {
height:30px;
padding:8px;
}
</style>
</head>
你可能想要!important。
input {
height: 30px !important;
padding: 8px !important;
}
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
特异性是浏览器决定哪些属性值与元素最相关并被应用的一种方法。特异性仅基于由不同种类的选择器组成的匹配规则。
重要的：
在样式声明上使用！important规则时，此声明将覆盖CSS声明中位于列表中任何位置的其他任何声明。虽然，！important与特异性无关。使用！important是不好的做法，因为它破坏了样式表中的自然层叠，使调试变得很困难。
所以!important是覆盖款式最简单的方法，因为它更“具体”比其他款式。请注意，覆盖样式是非常不好的做法，尤其是使用时!important。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句