CSS权威指南读书笔记-结构和层叠

选择器的特殊性:特殊性的值表示为四个部分 ,比如 0 0 0 0


对于选择器中给定的各个ID属性值,加0 1 0 0 

对于选择器中给定的各个类属性值,属性选择或伪类加 0 0 1 0

对于选择器中给定的各个元素和伪元素,加- 0 0 0 1 伪元素有特殊性,其特殊性为0 0 0 1

结合符合通配选择器对特殊性没有任何贡献

内联样式的特殊性为 1 0 0 0 


特殊性自左到右逐个比较 1 0 0 0 大于 0 * * *  0 0 1 0 大于  0 0 0 13

重要声明

在属性值结束分号前!important 标志 ,该标志必须放在声明的最后,每个声明都需要加!important才能生效

特殊性:重要声明分为一组,非重要声明为一组,重要声明的特殊性总大于非重要声明,每组元素的特殊性内部分别计算。

继承

继承无特殊性,比0特殊性还弱

层叠

创作人员样式胜过读者样式,有!important样式读者样式要强于其他所有样式,包括有!important样式的创作者样式,创作人员样式和读者样式都比用户代理的默认样式强。

按特殊性排序,较高特殊性的元素权重大于较低特殊性的元素

按出现顺序排序,一个声明在样式表中出现的顺序越靠后,权重越大。一般认为导入样式表中的声明在前,主样式表中的所有声明在后。

!important 强于内联样式

权重的大小顺序为

1、读者的重要声明

2、创作人员的重要声明

3、创作人员的正常声明

4、读者的正常声明

5、用户代理声明

link-visited-hover-active顺序的原因

根据越往后的权重越大原则,actice最先,之后是hover 再是visited  再是link

如果写作:

:active{ }

:hover{}

:link{}

:visited{}

因为一个元素要么是访问过的要么是未访问的,总会覆盖hover,

根据这一规则,想要让未访问的有悬停样式,已访问的没有可以写为:

:link--:hover--:visited--:active

:visited会覆盖hover

为避免冲突,可以使用伪类串联

:link:hover{} 这种写法合法

:link{color:green}

:visited{color:blue}

:link:hover{color:red}

:visited{color:black}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,101评论 0 1
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,214评论 0 40
  • 本文为阅读《Head First HTML 与 CSS》的css部分的读书笔记,方便回顾书上的知识,另一篇为Hea...
    兼续阅读 1,872评论 0 17
  • 姓名:母光艳 公司:宁波贞观电器 第235期,利他二组 【日精进打卡第119天】 【知-学习】 诵读《六项精进》大...
    母光焱阅读 135评论 0 0
  • 2017年 4月29日 星期六 今天早上妈妈带着我去诗浦市场买豆腐,我看到里面好多东西呀,就问妈妈:“妈妈,...
    曾雨萱阅读 328评论 0 0