样式优先级

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

元素内嵌：

<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. java环境设置与运行

    在初学java编程语言时,痛苦的事莫过于跟着示例一步步做,总是得不到想要的结果,这是很多初学者都会碰到的问题.下面详细教你运行第一个java应用程序(环境windows xp + jdk 6.0): ...

  2. php中二维数组如何使用

    最近需要使用PHP中的二维数组,就用一个简单的例子来说明PHP中二数组是如何使用 <?php $a=array('a','b','c'); $c=array('a1','b1','c1'); $ ...

  3. Objective-C 关于静态方法与实例方法的转载

    objective-c中非常重要的语法知识,在此归纳总结一下. 类方法,也称静态方法,指的是用static关键字修饰的方法.此方法属类本身的方法,不属于类的某一个实例(对象).类方法中不可直接使用实例 ...

  4. Redis 提供的好的解决方案 实例

    1.Redis 支持的String 类型的,它是 二进制的,比较安全,当有一些 图片或者css文件影响运行速度的时候,可以缓存之.

  5. Java错题

    加粗为正确答案,绿色为错选答案 1.对于以下代码: for ( int i=0; i<10; i++)  System.out.println(i); for循环后,i的值是多少? A.i不再存 ...

  6. [Bullet3]创建世界(场景)及常见函数

    创建世界(场景)及常见函数 官方文档:http://bulletphysics.org 开源代码:https://github.com/bulletphysics/bullet3/releases A ...

  7. 众人拾柴火焰高之Tomcat集群

    一人拾柴火不旺,众人拾柴火焰高.Tomcat服务器也是一样,一台服务器再强大能承受的访问也是有限的.要提供高并发.高可用的服务,就必须横向扩展,多台Tomcat组成一个集群,根据实际的访问量动态增减服 ...

  8. java作业—3

    动手动脑: 一.编写一个方法,使用以上算法生成指定数目(比如1000个)的随机整数. 方法1(数据类型)(最小值+Math.random()*(最大值-最小值+1)) 例:(int)(1+Math.r ...

  9. c++编程思想（三）--c++中c 续，重点sizeof和内存对齐

    之前理论性的太多,下面就是代码及理论结合了 1.sizeof()是一个独立运算符,并不是函数,可以让我们知道任何变量字节数,可以顺带学一下struct,union,内存对齐 内存对齐:为了机器指令快速 ...

  10. jQuery选择器课堂随笔

      $(function(){   //并集选择器   /*   $("h2,ul").css("background","pink");* ...