从覆盖bootstrap样式谈css选择器优先级
样式优先级
首先简单说几个定义样式的方式:
元素内嵌：
<li><a href="" style="color:#ffffff;">SHOW</a></li>
文档内嵌：
<style type="text/css">
/* 内部样式 */ h3 {
color: green;
}
</style>
外部样式：
<link rel="stylesheet" href="css/style.css">
上面这些都是题外话，接下来我来说说我遇到的问题，先看代码
<header class="navbar navbar-default navbar-fixd-top " id="benner">
<div class="container">
<a href="#" class="scrollable">FishShe</a>
<button class="navbar-toggle collapsede">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<nav class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="">ABOUT</a></li>
<li><a href="">SHOW</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
在这里，我想要修改bootstrap默认a元素的样式。最开始我是这样做的，引入我自己写的外部样式
<link rel="stylesheet" href="show.css">
/*外部样式*/
a {
color: #ffffff;
}
结果是这样的，为什么会这样，我不是把自己的样式表放在bootstrap引用的后面了么，为什么没有覆盖bootstrap样式。
查了css2规范之后我才知道是怎么回事。我们要先来了解一下css计算选择器的特殊性，css2规范里是这样描述的：
- 如果声明来自一个'style'属性而不是一条选择器样式规则，算1，否则就是0 (= a)（HTMl中，一个元素的"style"属性值是样式表规则，这些属性没有选择器，所以a=1，b=0，c=0，d=0）
- 计算选择器中ID属性的数量 (= b)
- 计算选择器中其它属性和伪类的数量 (= c)
- 计算选择器中元素名和伪元素的数量 (= d)
特殊性只根据选择器的形式来定。特殊的，一个"[id=p33]"形式的选择器被算作一个属性选择器(a=0, b=0, c=1, d=0)，即使id属性在源文档的DTD中被定义为"ID"
4个数连起来a-b-c-d（在一个基数很大的数字系统中（in a number system with a large base））表示特殊性。
一些示例：
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
也就是说，abcd相互比较，若a相同则比较b，如此类推，比如说比较到c的时候，样式一比样式二大，则特殊性（优先级）高。举个简单例子：
<head>
<meta charset="UTF-8">
<title>A Pen by FishShe</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style2.css">
</head> <body> <body>
<div>
<h3>测试！</h3>//这里应该为绿色
</div>
</body>
</body> /*style*/
h3 {
color: red;
} /*style2*/
h3 {
color: green;
}
当我把style样式表中的样式改为
div h3 {
color: red;
}
这时h3里的字体为红色，因为这时它的权重为0，0，0，2比较style2样式表中的0，0，0，1，abc相同，但是d的值比style2的大。说到这里，我不得不提一下，最开始提到的定义样式的几个方式，其实都是相同的来源，即编写者常规声明。当你为样式添加！important时，就是编写者重要声明，当来源和重要性相同的时候就根据特殊性来排序。所以我个人认为“文档内嵌的优先级比外部样式优先级高”这句话是不对的，它们是同一个来源；当来源、重要性和选择器特殊性一样的时候，则是后声明的生效，简单试一下，就可以知道外部样式的链接在文档内嵌（style结束标签）后面的话，生效的是外部样式。
现在说回使用bootstrap的问题，我想要使用自己的样式改变bootstrap中a标签的默认样式。bootstrap的a标签样式是
.navbar-default .navbar-nav>li>a {
color: #;
//它的权重是0,0,2,2
我可以直接这样：
<li><a href="" style="color:#ffffff">SHOW</a></li>//它的权重是1,0,0,0
但是这样我需要每个a都去设置，我还可以这样:
.navbar-default .navbar-nav>li>a {
color: #ffffff;
}
//它的权重是0,0,2,2，但是它是后定义的，可以生效。
最后我选择这样的，因为我需要全部的a标签都使用相同的我定义的样式
a{
color:#ffffff!important;
}
//直接改为重要声明
总的来说，当来源和重要性一样的时候，要去覆盖其他同样的属性的时候，就需要提高你的样式特殊性了（可以添加一个类、加一个父元素等等），特殊性相同时，后声明的生效。另外如果相同元素都声明了！important的话，就还是要看特殊性了。所以说，不要滥用important，最需要的时候用就是最好的。关于更多关于css层叠的信息可以查阅css2.1规范。
从覆盖bootstrap样式谈css选择器优先级的更多相关文章
- CSS：CSS样式表及选择器优先级总结
我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...
- 深入理解CSS选择器优先级
题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...
- CSS选择器优先级（转）
原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/T ...
- 看完就懂--CSS选择器优先级的计算
CSS选择器优先级的计算 什么是选择器的优先级 优先级的计算与比较(一) - 优先级具有可加性 - 选择器优先级不会超过自身最大数量级 - 同等优先级情况下,后写的覆盖前写的 - 并集选择器之间的优先 ...
- 关于Css选择器优先级
今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com --加以自己的理解 以备日后参照使用,毕竟自己理解的才是自己的. ...
- day44:CSS选择器优先级&JS基础
目录 1.CSS选择器优先级 2.补充:margin是可以设置百分比的 3.JS 3.1 js代码的引入方式 3.2 变量 3.3 数据类型 3.4 数组(类似于python中的列表) 3.5 自 ...
- CSS选择器优先级
1.类的覆盖顺序和应用的时候引用的顺序没关系,覆盖顺序取决于类定义的顺序 例如: .a{ color:red } .b{ color:green } 由于b晚于a定义,所以b覆盖a,反 ...
- CSS选择器优先级总结
CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
- CSS选择器优先级 CSS权值
计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1 ID的权值为 0,1,0,0 important的权值为最高 ...
随机推荐
- --@angularJS--路由插件UI-Router
UI-Router是angular路由插件,上一篇我们讲到了angularJS自带路由,可惜在路径嵌套上表现的有所欠缺,而angular-UI-Router插件正好弥补了这一点. [示例]: □.UI ...
- 数据库设计的误区—>CHAR与VARCHAR
字符型字段是数据库表中最常见的字段,而字符型字段又分为定长和变长两种.一般来说,VARCHAR类型用于存储内容长度变化较大的数据,CHAR类型用于存储内容长度没有变化或变化不大的数据. 在数据的内部存 ...
- MyBatis中的大于、小于、like等符号写法
其实就是xml的特殊符号,因为它的配置就是xml,所以可以用下面这种写法转义 < < > > <> <> & & ' ...
- cvc-complex-type.2.4.c: The matching wildcard...
在家里的电脑好好的,在单位的就不行,需要把web app libraties提到 最前面,然后clean一下项目
- jQuery查询性能考虑
http://blog.163.com/neusoft_hao@yeah/blog/static/120544724201282810510215/
- jquery.validate.js之自定义表单验证规则
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- Fourier分析基础（一）——Fourier级数
前言 傅立叶分析的作用是把一个函数变成一堆三角函数的和的形式,也就是分解.首先引入的是傅立叶级数,Fourier级数的作用是把函数变为可数无限个三角函数的和,而且这些三角函数的频率都是某个基频的整数倍 ...
- [CSS3] 学习笔记-CSS3盒子样式
1.盒子的类型 在CSS3中,使用display来定义盒子的类型,包括block,inline,inline-block类型.div元素和P元素,属于block类型,span元素和a元素,属于inli ...
- [译] 关于 Git 你需要知道的一些事情
分支和合并 Git 跟其他版本控制系统最大的优势就在于其高级的分支模型. Git 允许而且 鼓励 你在本地使用多个完全独立的分支.这些分支的创建,合并和删除几乎都可以在几秒内完成. 这意味着你可以轻松 ...
- C# 6 与 .NET Core 1.0 高级编程 - 38 章 实体框架核心（下）
译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 38 章 实体框架核心(下)),不对的地方欢迎指出与交流. 章节出自<Professional C# 6 ...