CSS学习笔记:层叠和继承
来源:互联网 发布:webpack搭建php服务器 编辑:程序博客网 时间:2024/05/14 07:43
特殊性
对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明上。如果元素有两个或多个冲突的属性声明,那么有最高特殊性的声明就会胜出。
- ID选择器:0 1 0 0
- 类选择器、属性选择器、伪类选择器:0 0 1 0
- 元素选择器、伪元素选择器: 0 0 0 1
- 结合符和通配符对特殊性没有任何贡献
要注意几点:
- ID选择器和指定id属性的属性选择器在特殊性上不同
- 内联样式比其他声明的特殊性都高,也就是 1 0 0 0
重要性
有时某个声明可能非常重要,超过了其它所有声明,那么就允许在这些声明的结束分号之前插入 !important 来标志。
注意:
- 每一条声明都需要它自己的!important标志。
- !important总是放在声明的最后,分号的前面;在其他位置都不会生效。
标志为!important 的声明并没有特殊的特殊性值,并且与未标注的声明分开考虑。所有!important 声明会分组在一起,它们的特殊性冲突会在其内部解决,而不会与非重要声明相混。
类似的,我们认为所有非重要声明也归为一组,使用特殊型来解决冲突。
如果一个重要声明和一个非重要声明冲突,胜出的总是重要声明。
继承
基于继承机制,样式不仅应用到指定的元素,还会应用到他的后代元素。
- 不是所有属性都能继承。
- 继承的值没有特殊性,比0特殊性还要弱
层叠
CSS的层叠规则如下:
- 找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器。
- 按权重和来源对所有应用到该元素的声明排序:
- 标志!important的规则的权重要高于没标注的;(也高于内联样式)
- 开发者样式、用户样式……
- 按特殊性对应用到元素的所有声明排序
- 按出现顺序对应用到元素的所有声明排序
- 一个声明在样式表中越后面的位置出现,它的权重就越大。
即如果两个规则的权重、来源和特殊性都完全相同,那么在样式表中后出现的会胜出。
- 一个声明在样式表中越后面的位置出现,它的权重就越大。
注意:一般认为元素style属性中指定的样式(即内联样式)位于文档样式表的最后。
正是由于这种按顺序排序,所以才有了通常推荐的链接样式顺序:link-visited-hover-active,其实link和visited的顺序不重要。
0 0
- CSS学习笔记:层叠和继承
- CSS学习笔记(三):继承、结构和层叠
- 前端学习笔记4:CSS的继承、层叠和特殊性
- 【CSS笔记四】CSS的继承、层叠和特殊性
- CSS 层叠 学习笔记
- CSS的层叠和继承
- 02 CSS-继承和层叠
- 层叠,继承和CSS单位
- CSS样式继承和层叠
- 02 CSS-继承和层叠
- CSS继承和层叠性
- CSS继承和层叠性
- CSS学习笔记之<层叠>
- CSS权威指南学习笔记--Chapter3结构和层叠
- CSS 层叠样式表----继承和覆盖
- CSS 层叠样式表----继承和覆盖
- css的样式继承和层叠
- CSS的继承、层叠和特殊性
- 欢迎使用CSDN-markdown编辑器
- C++与设计模式(2)--策略模式
- 110. Balanced Binary Tree (平衡二叉树判断)
- [struts2]严重: Dispatcher initialization failed java.lang.RuntimeException: java.lang.reflect.Invocati
- 浮雕效果一键工具
- CSS学习笔记:层叠和继承
- 重新学习C语言——比较两个数大小
- 8086指令
- ps快捷键总结
- 单链表实现多项式相加
- 圆,y=x²
- 111. Minimum Depth of Binary Tree (计算二叉树最小深度)
- JQuery UI之(三)可切换面板——tabs
- HDU 2571 命运