样式优先级

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

元素内嵌：

<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. Node.js理解

    JavaScript单线程的误解 在我接触JavaScript(无论浏览器还是NodeJS)的时间里,总是遇到有朋友有多线程的需求.而在NodeJS方面,有朋友甚至直接说到,NodeJS是单线程的,无 ...

  2. js 计算月/周的第一天和最后一天

    因为项目开发中遇到需要向后台传本周的开始和结束时间,以及上一周的起止时间,就琢磨了半天,总算写出来一套,写篇文章是为了方便自己记忆,也是分享给需要的人,水平有限,写的不好请见谅: getDateStr ...

  3. 去除android或者iOS系统默认的一些样式总结

    ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉 iOS用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0, ...

  4. DHCP协议

    来源摘取自百度百科 DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一个局域网的网络协议,使用UDP协议工作, 主要有两个用途:给内部网络或网络服 ...

  5. runtime ---- iOS

    1.runtime是什么?runtime是一套底层的C语言的API(包括C语言数据类型,C语言函数) 实际上平时我们写的OC代码底层都是基于runtime,实际上也就是最后都转成了runtime代码 ...

  6. JDBC连接数据库（二）——连接池

    参考博客:http://www.cnblogs.com/xdp-gacl/p/4002804.html 一. 应用程序直接建立数据库连接模型 应用程序直接每次访问数据库时,都建立创建一个数据库的链接, ...

  7. Redis 学习之持久化机制、发布订阅、虚拟内存

    一.持久化机制 Redis是一个支持持久化的内存数据库,redis会经常将内存中的数据同步到硬盘上来保证数据持久化,从而避免服务器宕机数据丢失问题,或者减少服务器内存消耗提高性能. 持久化方式: 1. ...

  8. [Hadoop] - TaskTracker源码分析(状态发送)

    TaskTracker节点向JobTracker汇报当前节点的运行时信息时候,是将运行状态信息同心跳报告一起发送给JobTracker的,主要包括TaskTracker的基本信息.节点资源使用信息.各 ...

  9. win7下安装maven3.1.1

    1.下载maven的安装包,下载地址http://maven.apache.org/download.cgi ,在这个页面中,你可以选择要下载的最新版本的maven gz包.我下载的是maven3.1 ...

  10. Java Web(五) JSP详解(四大作用域九大内置对象等)

    前面讲解了Servlet,了解了Servlet的继承结构,生命周期等,并且在其中的ServletConfig和ServletContext对象有了一些比较详细的了解,但是我们会发现在Servlet中编 ...