CSS继承_html/css_WEB-ITnose
程序员文章站
2022-04-14 17:50:12
...
前面的话
层叠样式表中最基本的一方面是层叠——冲突的声明通过层叠过程排序,并由此确定最终的文档表示,这个过程的核心是选择器及其相关声明的特殊性,以及继承机制。
特殊性
选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分:
【1】内联样式 -> 1,0,0,0
【2】ID属性值 -> 0,1,0,0
【3】类属性值、属性选择或伪类 -> 0,0,1,0
【4】元素或伪元素 -> 0,0,0,1
【5】结合符和通配选择器 -> 0,0,0,0
h1{} -> 0,0,0,1p em{} -> 0,0,0,2.grape{} -> 0,0,1,0*.bright{} -> 0,0,1,0p.bright em.dark{} -> 0,0,2,2#id121{} -> 0,1,0,0div#side *[href]{} -> 0,1,1,1
重要性
重要声明:在声明的结束分号之前插入!important来标志
继承
继承是从一个元素向其后代元素传递属性值所采用的机制。基于继承机制,样式不仅可以应用到指定的元素,还会应用到它的后代元素。继承的属性没有特殊性。
[注意1]在HTML中,应用到body元素的背景样式可以传递到html元素
[注意2]标签不会继承父元素的文本样式
层叠
【1】按来源及重要性排序。读者!important > 创作人员!important > 创作人员 > 读者 > 用户代理
【2】按特殊性排序
【3】按出现顺序排序,一个声明在样式表或文档中越后出现,权重越大
上一篇: 正则表达式
推荐阅读
-
66种基于animate.css的CSS消息提示动画效果_html/css_WEB-ITnose
-
最新HTML BroadcastChannel API引荐_html/css_WEB-ITnose
-
防止页面被iframe恶意嵌套_html/css_WEB-ITnose
-
如何使用CSS3画出一个叮当猫_html/css_WEB-ITnose
-
如何在blur或focusout事件里得到即将得到焦点的元素?另外这两个事件有什么区别?_html/css_WEB-ITnose
-
蒙版 倒影 渐变_html/css_WEB-ITnose
-
怎样制作web版的folder treeview_html/css_WEB-ITnose
-
CSS对话框特效 兼容性好_html/css_WEB-ITnose
-
现在就能投入使用的12个高端大气上档次的CSS3特性_html/css_WEB-ITnose
-
关于ueditor图片上传问题_html/css_WEB-ITnose