CSS 层叠 学习笔记
来源:互联网 发布:2017淘宝防排查技巧 编辑:程序博客网 时间:2024/04/29 06:06
看了一天控制器和视图头都大了,于是去微博上逛了逛,看到了一个讨论CSS权重的博客,于是把书翻了翻,对CSS中的层叠做一个笔记。
先从一个实例说起:
小明写了一个列表,并给里面的列表项添加了一些样式:
#list li{ color: #000;}
<ul id="list"> <li>Javascript</li> <li>HTML</li> <li>CSS</li></ul>
结构写好了,正想收工,这时候加了一个需求:鼠标选中某一个列表项的时候,将它的颜色变为红色。小明一看,这还不简单,给单击的元素加个类名”selected”,然后把对应的样式写好不就行了!
li.selected{ color: #f00;}
正高兴,结果一运行,不管鼠标怎么点,什么变化都没有。
这就是今天要讨论的问题,为什么会什么变化都没有,应该怎么解决?
我们都知道,每个合法的文档都会生成一颗结构树,我们选择元素时,就根据元素的祖先、属性、兄弟元素等创建选择器。只有有了这颗结构树,选择器才能起作用,这也是CSS继承的核心。
继承是从一个元素向其后代传递属性值所采用的机制,确定应当向一个元素应用哪些值时,浏览器不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源,这个过程就称之为层叠。
特殊性
对于一个选择器的特殊性,CSS将其表现为4个部分,代表了特殊性的权重,比如0, 0, 0, 0。
具体加权规则如下:
- 对于选择器中给定的各个id属性值,加 0, 1, 0, 0
- 对于选择器中给定的各个类属性值(class)、属性选择([href]等)或伪类(:active,:first-child等),加 0, 0, 1, 0
- 对于选择器中给定的各个元素(标签名)和伪元素(:before等),加 0, 0, 0, 1
- 结合符(>, ~等)和通配选择器(*)对特殊性没有任何贡献
比如
#title{} //0, 1, 0, 0p span //0, 0, 0, 2.selected //0, 0, 1, 0p.bright span.dark //0, 0, 2, 2div#slidebar *[href] //0, 1, 1, 1
对于他们的优先级按数值从左到右比较,碰到一项大的,这个特殊性就高,比如0, 1, 1, 0
高于0, 1, 0, 0
,0, 0, 1, 0
高于0, 0, 0, 99
至于第一项是怎么来的呢,其实第一项代表的是元素的内联样式,也就是说内联样式高于一切样式,就算指定了id也好,内联样式最终也会覆盖掉其他地方定义的样式:
#orange{ color: #ff90000;}<!-- 最终显示还是白色 --><div id="orange" style="color: fff"></div>
重要性
但是即使是最高优先级的内联样式,我们还是有办法覆盖掉它,这就是!important
声明,这个声明在结束分号之前加入。
加入!important
声明的优先级将高于其他的。
.orange{ color: #ff9000 !important;}#book{ color: #ccc;}<!-- 最后显示的是橙色(#ff9000)--><div id="book" class="orange" style="color: #000">example</div>
继承性
所谓继承性就是样式不仅应用到了指定的元素,还会应用到它的后代元素,举个例子:
h1{ color: #ff9000;}<h1>这是一个<span>大标题</span></h1>
给h1指定颜色后,span的颜色也随之变为了橙色,因为span是h1的子元素,对于ul中的li也是一样。当然,也有很多样式是不会继承的,比如边框(我们当然不希望给外层元素添加边框后里面全有了边框),对于margin和padding也是一样的。
总的来说,继承是一个CSS中最基本的内容,我们对于它都是“熟视无睹”了。
层叠
其实说了这么多大家应该对优先级都理解的差不多了,层叠说白了就是对所有的样式进行计算,确定最后应用的是哪一个样式。
需要注意的是对于同样优先级的样式,按声明的先后顺序排序,后声明的将覆盖掉之前声明的,这个应该不难理解。
小Tip
最后有一个小提示,对于超链接的样式,我们经常会设置它的四个状态的样式值:未被访问(:link)、被访问过(:visited)、鼠标悬浮(:hover)和鼠标按下(:active)
在说到特殊性的时候我们提到过,对于伪类,加0, 0, 1, 0,所以这四者的优先级是一样的,那么就需要按声明顺序进行排序了,一般建议按L-V-H-A的顺序声明:
:link{}:visited{}:hover{}:active{}
变换一下顺序就知道原因了,连接要么是点过的,要么是未点过的,所以如果把hover或active放在link和visited前面就永远被它们覆盖了。
最后,本文最开始出现的情景,现在应该轻而易举就能解决了吧?
- CSS 层叠 学习笔记
- CSS学习笔记之<层叠>
- 层叠样式表CSS学习笔记
- CSS学习笔记3-结构与层叠
- CSS学习笔记:层叠和继承
- 层叠样式表 CSS 学习笔记
- 层叠样式表 CSS 学习笔记 (1)
- CSS(层叠样式表)学习笔记(一)
- CSS(层叠样式表)学习笔记(二)
- CSS权威指南学习笔记--Chapter3结构和层叠
- CSS层叠样式表——学习笔记
- CSS学习笔记(三):继承、结构和层叠
- 前端学习笔记4:CSS的继承、层叠和特殊性
- CSS层叠样式表学习
- CSS学习笔记4:CSS层叠性、继承性以及权重计算
- CSS笔记之层叠、颜色和单位
- 学习笔记——CSS的高级特性:复合、继承、层叠
- 【HTML5学习笔记】12:尝试CSS层叠样式表和关键帧
- python链接数据库
- source insight 教程及Source Insight基本使用和快捷键
- hadop环境搭建(一)
- iOS编程 NStimer的使用
- sgu298:King Berl VI(差分约束)
- CSS 层叠 学习笔记
- 初学zigbee--IO口中断产生配置条件
- C语言int类型指针指向char类型变量简单实例
- Redis常用数据类型
- 二分法查找
- [LeetCode]Construct Binary Tree from Preorder and Inorder Traversal
- 控制语句(if-else+循环+switch)汇编规则
- wax框架之Lua call oc
- linux c 创建进程