前言

  最近在看《CSS权威指南》,书中第三章“结构和层叠”对特殊性的解释十分到位,今天就来整理下思路,记录如下。

  初来乍到,有何不妥请多多指点,有时间的话顺便评论下,讨论讨论~

引入问题

  

  非常简单的一个列表结构,那么想对“第一个”字样设置字体颜色,可能有两种方法:

  

  那么问题来了,究竟字体会变成什么颜色?

CSS规则结构

  

  每条CSS规则的结构如上,请记住各自名称,否则继续前行会有不适感。

特殊性

  关于特殊性的概念和作用书中说的很详细:

    对于每个规则,用户代理(浏览器)会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明。

    如果一个元素有两个或多个冲突的属性生命,那么有最高特殊性的声明就会胜出。

  整体来说分为两部分:计算和比较。第一眼看到肯定不太理解,那么先用起来,没事儿的时候回来看看,豁然开朗。

特殊性的计算规则

  按照特殊性的介绍中所述,如何计算特殊性是非常重要的,下面是书中所给的计算规则:

    1. 内联样式: 1,0,0,0

    2. ID选择器: 0,1,0,0

    3. class选择器、属性选择器、伪类选择器: 0,0,1,0

    4. 元素选择器、伪元素选择器: 0,0,0,1

    5. 通配符选择器: 0,0,0,0

    6. 结合符、继承: 没有特殊性

    7. !important:按照有无该关键字分为两组,各自计算

    注:四组数字之间没有任何关系,不存在进位一说。  

  上面的规则涵盖了所有可能出现的CSS选择器,可以根据这些计算出相关选择器的特殊性,浏览器会将特殊性赋值给声明块中的每一个声明。

  

  相关例子数不胜数,就不数了,会计算即可。

特殊性的比较规则:层叠

  反观特殊性的介绍,可知特殊性的计算是为了比较,进而决定胜出的样式进行显示,比较的规则称为层叠,当然前提是声明出现冲突的情况下。规则如下:

    1. 首先按照权重比较:

      读者重要样式>创作者重要样式>创作者正常样式>读者正常样式>浏览器默认样式

    2. 前述条件不能比较时,按照特殊性比较:

      特殊性从左到右依次比较每组数字,如:1,0,0,1和0,2,0,0,会按照前者定义样式显示。

    3. 前述条件不能比较时,按照出现顺序比较:

      后出现的会覆盖先出现的。

  根据上面的规则,可以得出问题的答案:颜色会如下:

    

小结

  第一次整理博客,收获蛮大的,平时看书大都一概而过,这次真的学透了。

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

  1. CSS中inherit指定继承的使用方法和auto的区别

    CSS中的每个属性都有一个特定值"inherit",其含义是指定继承父元素的相应属性,使用inherit一方面在代码上能地表明要继承于父元素的样式属性,另一方面也使子元素继承了那些 ...

  2. css中属性值继承小解

    继承:html元素可以从父元素那里继承一部分css属性,即使当前元素没有定义该属性. 1.css可以和不可以继承的属性 不可继承的:display.margin.border.padding.back ...

  3. css中权重与继承

    出处:http://blog.csdn.net/xf616510229/article/details/53613212

  4. CSS中文本继承情况

    无继承性的属性 http://www.cnblogs.com/thislbq/p/5882105.html   vertical-align:  垂直文本对齐   CSS中文本可以继承父级样式   体 ...

  5. CSS中继承,特殊性,层叠与重要性

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

  6. CSS中的层叠、特殊性、继承、样式表中的@import

    CSS中的层叠.特殊性.继承.样式表中的@import 层叠 CSS有一个机制是层叠,层叠可以理解为对样式的覆盖,优先性为: 网站开发者的样式表 用户样式(通过设置浏览器的显示选项) 浏览器默认的样式 ...

  7. css中的继承、层叠、样式优先级机制

    一.继承与层叠:

  8. CSS中层叠和继承的概念。

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码: 1 2 3 4 5 6 7 8 9 <ht ...

  9. css中的层叠性及权重的比较

    假如同一个标签被多个选择器选中,每个选择器都设置了相同的样式,浏览器中加载时这个样式听谁的? 不同选择器设置的同一个样式,只会选择一个进行加载,不会叠加. 为了解决听谁的问题,引入层叠性的概念. 层叠 ...

随机推荐

  1. [hadoop]Cannot create directory /mdrill/tablelist/fact_seller_all_d. Name node is in safe mode.

    在执行mdrill创建表的时候报如下异常(蓝色部分为关键): [mdrill@hadoop1101 bin]$ ./bluewhale mdrill create ./create.sql higo ...

  2. CSS的W3C标准的盒子模型和低版本IE浏览器的盒子模型

    CSS中盒子模型的组成由内容区(content).内边距(padding).边框(border).外边距(margin)组成.内边距可细分为 padding-top.padding-right.pad ...

  3. Oracle的实例占用内存调整

           1.操作 (oracle使用内存约等于 SGA+PGA,所以可以减少SGA与PGA解决你的问题,生产库慎用)alter system set sga_max_size=100m scop ...

  4. 关于Condition Variable的一些思考

    可能大家都使用过condition variable(之后称cv),一些博客也对cv做了介绍,但是有的说的不完全正确,甚至有误导使用者的倾向,其实最合理的使用方式是查阅文档, 如果你英语还ok的话,h ...

  5. U3D学习使用笔记(三)

    1.对动画进行播放和暂停(从初始位置) (1).老版动画系统Animation 暂停 an["Take 001"].time = 0f; an["Take 001&quo ...

  6. Java学习之道:Java项目打包发布

    Java项目打包发布 如果只想发布为一个可执行的jar包,使用eclipse的Export功能就可以了 使用eclipse的Export功能,将项目中的所有package打包为一个pet.jar文件, ...

  7. codeforces 553D . Nudist Beach 二分

    题目链接 有趣的题. 给一个图, n个点m条边. 有k个点不可选择. 现在让你选出一个非空的点集, 使得点集中strength最小的点的strength最大. strength的定义:一个点周围的点中 ...

  8. skynet初学

    记录下命令 git clone https://github.com/cloudwu/skynet.git sudo apt-get install autoconf sudo apt-get ins ...

  9. 学习iOS开发的前言

    一.什么是iOS 要想学习iOS开发,首先要搞清楚什么是iOS.iOS其实是一款操作系统,就像平时我们在电脑上用的XP.Win7,都是操作系统. 那什么是操作系统呢?操作系统其实是一种软件,是直接运行 ...

  10. @RISK

    Price: AUD $3,295.00   Price: AUD $2,495.00   适用于项目管理的 @RISK 免费试用版下载 » 立即购买 » 价格对比 » 许可选项 (英文) » 教学计 ...