样式优先级

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

元素内嵌：

<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. apache 做负载

    首先说明一下,我感觉这种办法不太好,不能叫负载吧.不知道跳转到的服务器把数据返回给用户,还通不通过Apache的服务器,还有就是不能断点下载了 方法 1.打开httpd.conf  把如下模块前面的# ...

  2. jquery的动画函数animate()讲解一

    jquery animate 动画效果使用说明 animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指 ...

  3. Windows 7 下 PHP 开发环境搭建（手动）

    Windows 7 下 PHP 开发环境搭建 1.说明 做开发的都知道一句话,就是“站在巨人的肩膀上”.确实现在打开浏览器随便一搜很多一键安装PHP环境的软件,比如wamp.xampp.AppServ ...

  4. 如何在asp.net页面使用css和js

    一.如何在asp.net页面中使用css1.可以直接写在需要样式控制的控件里 例如:<div style="border:#ff6100 1px solid">< ...

  5. js制作ppt阅读文档类型

    前几天开发中,客户要求在页面中展示一个类似ppt文档的一个东西,用轮播展示,但是有缩略图,和展示的大图,本想找些插件来做,后来想想,自己试下吧.. 有些简陋,但是能用,毕竟一行一行写的,留下来当笔记用 ...

  6. 【Scala】Scala之Control Structures

    一.前言 前面学习了Scala的Numbers,接着学习Scala的Control Structures(控制结构). 二.Control Structures Scala中的控制结构与Java中的颇 ...

  7. java Runtime类

    public class Test { public static void main(String[] args) throws UnsupportedEncodingException { Run ...

  8. 本地ssh连接到vbox中的linux

    本机是window xp系统, 安装vbox,在vbox下安装linux,想在xp中用ssh连接linux,此时需要配置网络. 1.设置vbox的网络,选择host-only 2.设置window虚拟 ...

  9. Mac系统安装Aircrack-ng破解附近wifi密码(1)

    第一步, 安装macport, 安装Xcode 安装macport macport 是一个工具 管理软件包的一个工具, 我们也可以通过别的方式安装Aircrack-ng, 但是通过macport安装A ...

  10. ubuntu 下配置Web服务器

    ubuntu 下配置Web服务器 1.切换管理员身份 终端/文本界面输入命令: su 根据提示输入密码 注: 如果不能使用su 点击查看如何启用su2.安装MySQL5 apt-get install ...