样式优先级

首先简单说几个定义样式的方式:

元素内嵌:

<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选择器优先级的更多相关文章

  1. CSS:CSS样式表及选择器优先级总结

    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...

  2. 深入理解CSS选择器优先级

    题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...

  3. CSS选择器优先级(转)

    原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/T ...

  4. 看完就懂--CSS选择器优先级的计算

    CSS选择器优先级的计算 什么是选择器的优先级 优先级的计算与比较(一) - 优先级具有可加性 - 选择器优先级不会超过自身最大数量级 - 同等优先级情况下,后写的覆盖前写的 - 并集选择器之间的优先 ...

  5. 关于Css选择器优先级

    今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com  --加以自己的理解 以备日后参照使用,毕竟自己理解的才是自己的. ...

  6. day44:CSS选择器优先级&JS基础

      目录 1.CSS选择器优先级 2.补充:margin是可以设置百分比的 3.JS 3.1 js代码的引入方式 3.2 变量 3.3 数据类型 3.4 数组(类似于python中的列表) 3.5 自 ...

  7. CSS选择器优先级

    1.类的覆盖顺序和应用的时候引用的顺序没关系,覆盖顺序取决于类定义的顺序     例如: .a{ color:red } .b{ color:green }     由于b晚于a定义,所以b覆盖a,反 ...

  8. CSS选择器优先级总结

    CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  9. CSS选择器优先级 CSS权值

    计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1  ID的权值为 0,1,0,0 important的权值为最高 ...

随机推荐

  1. MapReduce深度分析(一)

    MapReduce深度分析(一) 一.数据流向分析 图为MapReduce数据流向示意图 步骤1.输入文件从HDFS流向到Mapper节点.在一般情况下,存储数据的节点就是Mapper运行的节点,不需 ...

  2. ORACLE获取字符串中数字部分

    ') from dual; select regexp_replace('23456中国3-00=.,45','[^0-9]') from dual;标签:regexp_replace regexp ...

  3. HTML URL

    HTML 统一资源定位器(Uniform Resource Locators) URL 是一个网页地址. URL可以由字母组成,如"runoob.com",或互联网协议(IP)地址 ...

  4. 在ASP.NET MVC中使用JQ插件datatable

    1. Models public class Citys { public int Id { get; set; } public string CityName { get; set; } publ ...

  5. hyperLink的定制

    在iReport中增加hyperLink,点击之后没有反应:需要重新写一遍net.sf.jasperreports.view.JRViewer; 修改其中的gotoHyperlink方法: case ...

  6. Express 3.0新手指南入门教程

    在确认已经安装了node之后(下载), 在你的机器上创建一个目录,让我们来开始你的第一个应用程序吧 $ mkdir hello-world 在这个目录中你首先得定义一下你的应用程序“包”文件,它和其它 ...

  7. Android笔记:Fragment与ViewPager组合时,如何在FragmentActicity获取Fragment对象

    项目中有一处需要监听宿主的控件,再去更新Fragment页面,由此必须去获取Fragment里的对象; 在FragmentActivity + Fragment组合里是可以使用以下方案: MedicF ...

  8. 不是技术牛人,如何拿到国内IT巨头的Offer (转载)

    原文地址:http://blog.csdn.net/lsldd/article/details/13506263 不久前,byvoid面阿里星计划的面试结果截图泄漏,引起无数IT屌丝的羡慕敬仰.看看这 ...

  9. app与后台交互之间的几种安全认证机制

    1.HTTP简单基本认证方式 这个是早期交互用得比较多的一种方式,主要是使用用户名和密码来交互,由于在每次的交互中,用户名和密码都会暴露给第三方,那么这么做是不可取的,风险十分大,所以这种认证方式并没 ...

  10. Unity起步-1.1下载和安装Unity

    1.1.下载和安装Unity 1.1.1 选取版本 首先找到Unity官方网站https://store.unity.com/cn,如果要下载最新版本,可以选择"立即下载".不过我 ...