这是我参与「第四届青训营」笔记创作活动的的第2天!
本期重新打卡学习CSS进阶(一)部分,进行查漏补缺
1. 选择器权重
-
内联 - 1000
-
id - 100
-
class - 10, 伪类 - 10,属性 - 10
-
标签 - 1, 伪元素 - 1
-
相邻兄弟选择器 - 0,子选择器 - 0,后代选择器 - 0,通配选择器 - 0
2. 选择器特异度
特异度判定标准(按选择器权重理解)
#
(id) -------- .
(类、伪类) -------- E
(元素、伪元素)
1. #nav .list li a:link
2. .hd ul .links a
如上述例子
(1)中 => id选择器数量为1,(伪)类选择器数量为2(.link, :link),(伪)元素选择器数量为2(li, a) ===> 特异度为 122
(2)中 => id选择器数量为0,(伪)类选择器数量为2(.hd, .links),(伪)元素选择器数量为2(ul, a) ===> 特异度为 22
END: 所以(1)的优先级高于(2)
3. CSS中可继承与不可继承属性
本点内容来源于网络
一、无继承性的属性
- display:规定元素应该生成的框的类型
- 文本属性:
- vertical-align:垂直文本对齐
- text-decoration:规定添加到文本的装饰
- text-shadow:文本阴影效果
- white-space:空白符的处理
- unicode-bidi:设置文本的方向
- 盒子模型的属性:width、height、margin、border、padding
- 背景属性:background、background-color、background-image、background-repeat、background-position、background-attachment
- 定位属性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
- 生成内容属性:content、counter-reset、counter-increment
- 轮廓样式属性:outline-style、outline-width、outline-color、outline
- 页面样式属性:size、page-break-before、page-break-after
- 声音样式属性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
二、有继承性的属性
- 字体系列属性
- font-family:字体系列
- font-weight:字体的粗细
- font-size:字体的大小
- font-style:字体的风格
- 文本系列属性
- text-indent:文本缩进
- text-align:文本水平对齐
- line-height:行高
- word-spacing:单词之间的间距
- letter-spacing:中文或者字母之间的间距
- text-transform:控制文本大小写(就是uppercase、lowercase、capitalize这三个)
- color:文本颜色
- 元素可见性
- visibility:控制元素显示隐藏
- 列表布局属性
- list-style:列表风格,包括list-style-type、list-style-image等
- 光标属性
- cursor:光标显示为何种形态
对于不可继承的属性可以通过加入inherit进行显式继承
4. CSS求值过程
-
【DOM树】 + 【样式规则】 👉 浏览器对HTML解析成DOM树,把样式搜集起来成为样式规则
-
【filtering】 👉 对应用到这个页面的规则如下条件进行筛选:选择器匹配、属性有效、符合当前的media等
- 在此阶段可以获得一个
声明值
(Declared Values),即一个元素可能有多个声明值,如p {font-size: 16px;}
和p.text {font-size: 1.2em;}
- 【cascading】 👉 决定用哪个声明值,按照其来源、!important、选择器特异性、书写顺序找出一个优先级最高的属性值
- 在此阶段将得到
层叠值
(Cascaded Value),在层叠过程中,优先级最高的那个值如p.text {font-size: 1.2em;}
- 【defaulting】 👉 如果层叠值为空时,使用继承或初始值
- 在此阶段将得到
指定值
(Specified Value),经过cascading和defaulting两个阶段,选择出有且之只有一个指定值
- 【resolving】 👉 前述的指定值(比如相对值1.2em、图片的相对路径)还不能直接能用来做浏览器渲染,此阶段将相对值转成绝对值
- 在此阶段将得到
计算值
(Computed Value),在浏览器不进行实际布局时候的情况下所能得到的最具体的值。比如60%不会在此阶段计算,需要依赖于实际用户浏览器的宽度,将在下一阶段进行
- 【formatting】 👉 将计算值进一步转换,比如将关键字(initial、inherit)、百分比转成绝对值
- 在此阶段将得到
使用值
(Used Value),进行实际布局时能使用的值,不会再有相对值或关键字。但比如400.2px这种精度的值无法直接使用
-
【constraining】 👉 如将小数像素进行四舍五入转成整数,受限于如max-width限制算出的width的值
-
【实际值】 👉 渲染时实际生效的值,比如400px