属性值的计算过程（怎么确定的）

元素的每一个css属性，一定会根据下述优先级，寻找声明值：

作者样式表 > 对冲突属性值进行权重计算> 继承样式表 > 默认样式表

【资料图】

冲突属性值的权重计算规则

元素css属性优先级，都是根据下述规则进行权重总计的：

比较重要性：important > 作者样式 > 默认样式；

比较特殊性：内联 style > #id > .class > 元素标签 > *；

比较次序：靠后的样式优先；

元素不再根据"行内"、"块"进行区分

而是表达为：元素的css display属性为块盒 block 和行盒 inline；

常用的选择器

div span匹配所有位于任意 <div>元素之内的 <span>元素；

ul > li匹配直接嵌套在 <ul>元素内的所有 <li>元素。直接子代选择器；

p ~ span匹配同一父元素下，<p>元素后的所有 <span>元素。兄弟选择器；

h2 + p会匹配紧邻在 h2 元素后的第一个 <p>元素；直接兄弟选择器；

伪类：button :active 点击中的按钮

伪元素：button :: content 按钮中的额外内容

特殊的 css 值

initial：主动将某一css属性设为默认值

unset：清除浏览器默认样式(全部清除all:unset)

revert：恢复浏览器默认样式

使用 css 变量

:root { --font: 16px; }{ font-size: var(--font) }{ font-size: calc( var(--font) * 2 ) }

使用 clip-path 对元素进行任意形状的裁剪

使用 box-decoration-break: clone 保持对行盒的截断样式

使用 filter 修改元素中的边缘像素点

毛玻璃：backdrop-filter: blur()