一、特殊性规则

选择器的特殊性由选择器本身的组件确定；特殊性由四个部分组成，其初始值为0，0，0，0。

1.    对于选择器中的每一个id，记0，1，0，0；

2.    对于选择器中的每一个类、伪类、属性，记0，0，1，0；

3.    对于选择器中的每一个元素、伪元素，记0，0，0，1；

4.    结合符与通配符对于选择器的特殊性没有任何贡献。

注意：

1.    0，0，1，0的特殊性比0，0，0，13的特殊性更高。

2.    通配符 * 的特殊性为0，0，0，0，它是有特殊性的；结合符（比如h1+p中的“+”）根本没有特殊性；继承而来的样式也没有特殊性。

请看如下代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style>

             * {

                 color:red;

             }

             body {

                 color:cyan;

             }

         </style>

     </head>

     <body>

         <p>What kind of color this para will be?</p>

     </body>

 </html>

页面显示如下：

此例中，<p>元素从<body>元素中继承了cyan颜色，然而继承来的规则根本没有特殊性，其优先级低于 * 的0特殊性，所以<p>元素采用了 * 的规则，颜色为red。

关于通配符 * ：由于 * 适用于所有元素，而且有0特殊性，往往会在不经意间造成继承无法实现的情况，应该尽量避免使用 * 选择器。

3.    指定id属性的属性选择器与id选择器有本质区别，比如：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style>

             div[id="test"] p {

                 color:red;

             }

             #test p {

                 color:cyan;

             }

         </style>

     </head>

     <body>

         <div id="test">

             <p>What kind of color this para will be?</p>

         </div>

     </body>

 </html>

页面效果：

此例中，div[id="test"] p 的特殊性为0，0，1，2；而 #test p 的特殊性为0，1，0，1；#test p 这个选择器胜出，所以字体颜色为cyan。

4.    行内样式的特殊性最高，为1，0，0，0。

5.    标记为!important的声明被称为重要声明，它没有特殊性，不过要与非重要声明分开考虑。

具体而言：非重要声明分为一组，它们之间的冲突使用特殊性解决；重要声明分为一组，它们之间的冲突内部解决；重要声明总是比非重要声明优先。

二、继承

1.    继承没有任何特殊性，记住这一点往往能明白很多问题。

请看如下代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style>

             p {

                 color:red;

             }

         </style>

     </head>

     <body>

         <p>What kind of color this <a href="#">link</a> will be?</p>

     </body>

 </html>

页面效果：

为什么设置了<p>元素的颜色为红色，<a>元素的颜色却是蓝色？

这并不是因为<a>元素不继承父元素的颜色（原谅我之前就是这么认为的），而是因为<a>元素继承了<p>元素的颜色，但是这个继承来的样式根本没有特殊性，然而浏览器默认样式中对<a>元素设置了样式，很明显浏览器默认样式的特殊性更高，于是<a>元素就按照浏览器默认样式显示。

2.    CSS中有一个关键字是所有属性共有的，inherit，它使一个属性的值与其父元素相同。

在大多数情况下，不必指定继承，因为大多数属性会自动继承；不过，自动继承的属性没有特殊性，很容易被其它样式覆盖；当需要显式地指定一个元素的样式与其父元素一致时，使用inherit会更方便。

三、层叠

层叠规则：

1.    按权重排序；读者重要声明>作者重要声明>作者一般声明>读者一般声明>用户代理声明。

2.    权重相同的情况下，按照特殊性排序，特殊性越高的胜出。

3.    特殊性相同的情况下，按照样式表中的顺序排序，后出现的胜出。

btw，正是因为这个规则，才会使用LoVe-HA的顺序声明链接样式（LoVe-HA 依次为 :link;  :visited;  :hover;  :active）。

关于 外部样式<内部样式<行内样式 的说明：

这种说法来源于上述第3条规则。一般而言，在html的<head>元素下，我们习惯将外部样式表的<link>标签放在内部样式<style>之前，这就导致了内部样式的顺序在外部样式的顺序之后，所以内部样式优先级高；但是如果将<style>标签与<link>标签调换位置，比如这样：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style>

             p {

                 color:red;

             }

         </style>

         <link rel="stylesheet" type="text/css" href="1.css">

     </head>

     <body>

         <p>What kind of color this para will be?</p>

     </body>

 </html>

此例中，外部样式表包含 P {color:cyan;} 这样一条规则，它的特殊性与内部样式表一样，都为0，0，0，1，但由于外部样式表在内部样式之后，所以外部样式胜出，页面显示如下：

所以，

外部样式<内部样式 这只是一种习惯上的说法，关键还是要看它们出现的顺序，顺序越靠后的优先级更高。

当然，行内样式总是最靠后的，所以它的优先级高于外部样式和内部样式，这是毋庸置疑的。

CSS 特殊性、继承与层叠的更多相关文章

  1. CSS系列：CSS的继承与层叠特性

    1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...

  2. css的继承和层叠

    标签(空格分隔): css css称为层叠样式表,CSS有两大特性:继承性和层叠性,本章简单介绍一下继承性: 继承性: 定义:继承就是给父及设置了一些属性,子级继承了父及的该属性,这就是我们的css的 ...

  3. html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版

    继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...

  4. HTML+CSS学习笔记（9）- CSS的继承、层叠和特殊性

    标签:HTML+CSS 继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这 ...

  5. css的继承、层叠和特殊性

    1,继承  css的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代. 但注意有一些css样式是不具有继承性的.如border: ...

  6. CSS学习笔记之CSS的继承、层叠和特殊性

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签 ...

  7. 从零开始学习html（九）CSS的继承、层叠和特殊性

    一.继承 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...

  8. CSS 选择器继承和层叠

    CSS选择器及其继承特性.层叠特性1.基本选择器  标记  id  class  这个就不再作介绍了 2.复合选择器  交集 交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集 其 ...

  9. css选择器---继承,优先级,层叠

    CSS三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  10. CSS选择器与CSS的继承,层叠和特殊性

    什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...

随机推荐

  1. Java容器深入浅出之HashSet、TreeSet和EnumSet

    Java集合中的Set接口,定义的是一类无顺序的.不可重复的对象集合.如果尝试添加相同的元素,add()方法会返回false,同时添加失败.Set接口包括3个主要的实现类:HashSet.TreeSe ...

  2. js & listen mouse click

    js & listen mouse click how to listen mouse click in js https://www.kirupa.com/html5/mouse_event ...

  3. python mysql开发日志

    开始做python 的数据库访问了,暂时选定了mysql数据库.原本想使用ORM,后来考虑到项目的情况是:表结构不复杂,但是数据库非常大.还是自己来操作sql,不过PYTHON的那些数据库ORM的代码 ...

  4. 【BZOJ1045】糖果传递（贪心）

    [BZOJ1045]糖果传递(贪心) 题面 BZOJ 洛谷 题解 秉承者娱乐精神,我们必须写一个费用流,并且相信信仰跑不过去. 于是写了一个\(zkw\)费用流如下:(您可以无视此份代码) #incl ...

  5. SDNnet PX Programmming Language

    写在前面 本篇是关于 SDNet PX Programming Language User Guide 其中「Introduction」 部分的一些翻译.理解以及我从其他方面看来的一些资料的整合.网上 ...

  6. 安装Xtrabackup，设置定时备份msyql数据库

    Xtrabackup是由percona提供的mysql数据库备份工具,据官方介绍,这也是世界上惟一一款开源的能够对innodb和xtradb数据库进行热备的工具. XtraDB 存储引擎是由Perco ...

  7. bzoj 3928: [Cerc2014] Outer space invaders

    $f[i][j]$表示消灭起始时间在$(i,j)$内的外星人所花费的最小代价. 考虑在这个区间内距离最远的外星人h,在他的区间中一定要选一个点要开一炮,而且这一炮可以顺便把其他跨过这个点的敌人消灭,剩 ...

  8. 【Asp.net入门05】第一个ASP.NET 应用程序-测试Asp.net程序

    测试示例应用程序 本部分内容: ASP.NET应用程序测试方法 web窗体访问过程 Visual Studio工具栏上有一个下拉列表,其中列出了工作站上已安装的浏览器的名称(单击浏览器名称右侧的向下箭 ...

  9. Java5的新特性

    原文出处:xixicat 序 这是Java语言特性系列的第一篇,从java5的新特性开始讲起.初衷就是可以方便的查看语言的演进历史. 特性列表 泛型 枚举 装箱拆箱 变长参数 注解 foreach循环 ...

  10. 数据库sharding系列好文收藏

    部分摘自于:http://my.oschina.net/u/188625/blog/104743 1. 又拍网架构中的数据库分库设计 . http://blog.csdn.net/nanjingjia ...