我在我的网站上使用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] 删除。
我来说两句