ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

层叠、继承及属性值的计算过程

2021-12-29 16:33:19  阅读:101  来源: 互联网

标签:层叠 继承 元素 样式表 选择器 css 属性


目录

层叠

1.比较重要性:

2.比较特殊性:

3.比较源次序

4.应用

继承

属性值的计算过程

1.确定声明值

2.层叠冲突

3.使用继承

4.使用默认值


层叠

声明冲突:同一个样式,多次应用到同一个元素

层叠:解决声明冲突的过程,浏览器的自动处理(权重计算)

1.比较重要性:

重要性从高到低:

1)作者样式表中的!important样式

2)作者样式表中的普通样式

3)浏览器默认样式表中的样式

2.比较特殊性:

总体规则:选择器选中的范围越窄,越特殊

具体规则:通过选择器,计算出一个四位数(****)

1)千位:如果是内联样式,记作1,否则0

2)百位:等于选择器中所有id选择器的数量

3)十位:等于选择器中所有类选择器,属性选择器,伪类选择器的数量

4)个位:等于选择器中所有元素选择器,伪元素选择器的数量

3.比较源次序

代码书写靠后的胜出

4.应用

1)重置样式表:

书写一些作者样式,覆盖浏览器的默认样式

重置样式表是针对浏览器的默认样式

常见的重置样式表:normalize.css、reset.css、meyer.css

2)爱恨法则:

link>visited>hover>active

继承

子元素会继承父元素的某些css属性

通常,跟文字内容相关的属性都能继承(宽高、背景不可继承

属性值的计算过程

属性值的计算过程(页面渲染过程)

一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行

渲染每个元素的前提条件:该元素所有css属性必须有值

一个元素,从所有属性都没有值到所有属性都有值,该计算过程叫属性值计算过程

1.确定声明值

参考样式表中没有冲突的声明,作为css属性值

2.层叠冲突

对样式表中没有冲突的声明使用层叠规则,作为css属性值

3.使用继承

对仍无值的属性,若可继承,则继承父元素值

4.使用默认值

对仍无值属性,使用默认值

inherit:手动强制继承,将父元素值取出应用到该元素

inltial:初始值,将该属性值设为默认值

标签:层叠,继承,元素,样式表,选择器,css,属性
来源: https://blog.csdn.net/qq_56458222/article/details/122215233

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有