CSS中的特殊性、继承、层叠

前言

  最近在看《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. 前述条件不能比较时,按照出现顺序比较:

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

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

    

小结

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

时间: 2024-10-07 06:00:59

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

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

CSS中的每个属性都有一个特定值"inherit",其含义是指定继承父元素的相应属性,使用inherit一方面在代码上能地表明要继承于父元素的样式属性,另一方面也使子元素继承了那些不会被自动继承的属性. 也就是说: inherit是继承父类的属性,一般用于字体.颜色等 auto是按情况自适应,一般用于高度.宽度.外边距和内边距等关于长度的属性 假如设计者要使class为box的div元素有2px的黑色边框,且具有5px的填充,同时想让其子div元素也具有同样的样式, 则可以编写如下规则

css中属性值继承小解

继承:html元素可以从父元素那里继承一部分css属性,即使当前元素没有定义该属性. 1.css可以和不可以继承的属性 不可继承的:display.margin.border.padding.background.height.min-height.max-height.width.min-width.max-width.overflow.position.left.right.top.bottom.z-index.float.clear.table-layout.vertical-align.

CSS中文本继承情况

无继承性的属性 http://www.cnblogs.com/thislbq/p/5882105.html vertical-align:  垂直文本对齐 CSS中文本可以继承父级样式 体系列属性 font:组合文字 font-family:字体系列 font-weight:文字粗细 font-size:文字大小 font-style:文字风格 文本系列 text-indent:文本缩进 text-align:文本对齐方式 line-height:行高 color:文本颜色

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

继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码: <html><head> <style> p{border:1px solid red} </style> </head> <body> <p>123<span>123</span>123</p> </body> </h

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

一.继承与层叠: 注: 可继承的样式: font-size font-family color ul li dl dt dd; 不可继承的样式:border padding margin width height ; 二.样式优先级机制: 1.css中的选择器有如下几类: 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p...) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器(li a) 7.通配符选

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

假如同一个标签被多个选择器选中,每个选择器都设置了相同的样式,浏览器中加载时这个样式听谁的? 不同选择器设置的同一个样式,只会选择一个进行加载,不会叠加. 为了解决听谁的问题,引入层叠性的概念. 层叠性:多个选择器选中同一个标签,设置同一个样式,浏览器中加载时,不会加载所有的属性值,挑选其中一个加载,其中一个值层叠/覆盖掉其他的值.   要实现层叠或覆盖就涉及到比较,下面就是比较选择器之间的权重的比较,权重的比较一共有两种情况:1.选择器选中了标签:2.选择器没有选中标签 首先说一下选择器的权重

CSS设计指南之CSS三种机制:继承、层叠和特指

一.继承 CSS中的祖先元素也会向后代传递一样东西:CSS属性的值.body元素是所有元素的祖先,所有标签都是它的后代,比如为body元素设置一种字体,那么文档中的所有元素,无论它在层次结构中多么靠下,都将继承这些样式.CSS中有很多属性都可以继承,其中相当一部分都与文本有关. 二.层叠 层叠,就是层叠样式表中的层叠,是一种样式在文档层次中逐层叠加的过程.目的是让浏览器面对某个标签特定属性的多个来源时,确定最终使用哪个值. 1.样式来源 浏览器默认样式表:因为你还没有显示设置CSS属性,h1就会

深入理解CSS中的层叠上下文和层叠顺序(转)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时

深入理解CSS中的层叠上下文和层叠顺序

零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时候,显然,是不可能做到完全等同的,先后顺序,身份差异就显现出来了.例如,杰克和罗斯,只能一人浮在木板上,此时,出现了冲突,结果大家都知道的.那对于CSS世界中的元素而言,所谓的“冲突”指什