样式优先级

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

元素内嵌：

<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. 在向服务器发送请求时发生传输级错误。 (provider: TCP 提供程序, error: 0 - 远程主机强迫关闭了一个现有的连接。)

    用VS2005+SQLSERVER2008开发C/S的程序,程序上线运行一段时间之后发现在某些功能偶尔出现如下的错误: 在向服务器发送请求时发生传输级错误. (provider: TCP 提供程序, ...

  2. 负载均衡 Lvs nat 模式笔记

    nat技术(网络地址转换) 缺点就是进入和返回都通过调度器的服务器,未来可能会成为瓶颈 实验:nat 模式 先在调度器安装ipvsadm 后再添加网卡,后面就连不上网了(yum -y install ...

  3. 纯代码实现CSS圆角

    我这里说的是纯代码,是指的不使用图片实现圆角,图片实现圆角,这里就不说了. 纯代码实现圆角主要有3种方法: 第一种:CSS3圆角   #chaomao{     border-radius:2px 2 ...

  4. js验证IP及子网掩码的合法性

    function checkIP(ip) {     obj=ip;    var exp=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0 ...

  5. H.264转码加速：NVENC大战Quick Sync

    GPU加速技术对普通消费者最直观的影响就是视频转码应用上了,NVIDIA..AMD以及Intel都有自己的加速技术,而在新一代CPU和GPU架构上,三方都有更新的技术方案.<br>< ...

  6. EntityFramework Core Raw Query再叙注意事项后续

    前言 话说通过EntityFramwork Core进行原始查询又出问题,且听我娓娓道来. EntityFramework Core Raw Query后续 当我们进行复杂查询时我们会通过原始查询来进 ...

  7. 实现jul 日志重定向到 slf4j

    需求背景 jul 指的是java.util.logging,是 java 内置的日志模块,目前流行的Java日志组件还包括 jcl(common-logging).slf4j/log4j/logbac ...

  8. gcc 简单编译流程

    注意:GCC在链接时优先使用动态链接库,只有当动态链接库不存在时才考虑使用静态链接库,可在编译时加上-static选项,强制使用静态链接库. gcc -static  此选项将禁止使用动态库,所以,编 ...

  9. 游戏音频技术备忘 （四） Wwise Unreal Engine 集成代码浅析 （一）

    在Engine\Plugins\Wwise\Source下为主要Wwise相关代码,AkAudio文件夹下为运行时相关代码,AudiokineticTools下为编辑器工具相关代码,Audiokine ...

  10. Mysql数据库连接查询

                                    Mysql数据库连接查询 连接是关系数据库模型的主要特点.连接查询是关系数据库中最主要的查询,主要包括内连接.外连接等.通过连接运算可以 ...