样式优先级

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

元素内嵌：

<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. redhat+11g+rac 安装数据库软件时只有一个节点可选

    在安装数据库软件时,只能检测到一个节点 650) this.width=650;" title="捕获.JPG" src="http://s3.51cto.co ...

  2. permeation开篇

    学习方法: To follow the path look to the master follow the master walk with the master see through the m ...

  3. C# 枚举的使用

    /// <summary>    /// 枚举的使用    /// 主要功能:使用枚举的值DataTypeId.Money,获取对应的Money字符串.    /// </summa ...

  4. Flash神奇的视频利器StageVideo

    在过去的几年里,视频已经成为web网页上最主流的趋势之一,这主要是由Adobe Flash Player来推动的.2007年Flash Player 9中引入了H.264和全屏支持技术,通过在web页 ...

  5. Angularjs^1.2.9 搜索关键字高亮显示

    需求分析: 根据关键字搜索网页内容,并且高亮显示内容中的关键字细节分析: 1.每次执行搜索操作,需清空上一次结果 2.需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情 ...

  6. C++：C语言实现HTTP的GET和POST请求

    HTTP请求和IP/TCP 所谓的HTTP协议是基于IP/TCP协议的, 所以要获取远端的html数据只要创建socket对象就足够了: HTTP是基于IP/TCP加上了网络请求的固定格式, 比如: ...

  7. 【java设计模式】之 抽象工厂（Abstract Factory）模式

    1. 女娲的失误 上一节学习了工厂模式,女娲运用了该模式成功创建了三个人种,可是问题来了,她发现没有性别--这失误也忒大了点吧--竟然没有性别,那岂不是--无奈,只好抹掉重来了,于是所有人都被消灭掉了 ...

  8. 《JAVASCRIPT高级程序设计》节点层次和DOM操作技术

    DOM可以将任何HTML和XML文档描绘成一个由多层次节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息,每种类型都继承与Node接口,因此都共同享有一些属性和方法,同时,也拥有 ...

  9. asp.net core mvc权限控制：在视图中控制操作权限

    在asp.net core mvc中提供了权限验证框架,前面的文章中已经介绍了如何进行权限控制配置,权限配置好后,权限验证逻辑自动就会执行,但是在某些情况下,我们可能需要在代码里或者视图中通过手工方式 ...

  10. block之---数据传递

    block值传递分为两种情况 1.值传递 含义: 类似于函数参数的值传递,block内部对值的改变对外部没有影响,外部改变对block内部也没有影响. 情况 block访问外部局部变量没有被任何关键字 ...