样式计算|CSS专题 | 前端进阶之旅 - 前端求职面试刷题宝典

# 前言

有试过样式覆盖导致排版出问题或布局时不知使用什么长度单位声明属性吗？这些问题应该都是比较常见的问题，笔者有位同事遇到样式覆盖的问题时一言不合使用!important暴力解决，这样真的好吗？

# 优先级别

样式覆盖的根本原因是未处理好规则间的优先级别，虽然使用!important能解决问题，但是不能什么情况都由!important暴力解决

为何样式需优先级别呢？当创建的样式越来越复杂时，一个节点的样式将会受到越来越多的影响，这种影响可能来自周围节点也可能来自自身。通过相关规范分配给规则一个权重，那么样式可按照权重计算，呈现页面最终的效果。

从以下几方面了解优先级别，相信能更好把握优先级别的使用场景。

特点

使用就近原则
继承样式的优先级别最低
!important样式的优先级别最高，若冲突则重新计算

权重

直观权重

10000：!important
1000：内联样式、外联样式
100：ID选择器
10：类选择器、伪类选择器、属性选择器
1：元素选择器、伪元素选择器
0：通配选择器、后代选择器、兄弟选择器

微观权重

1,0,0,0,0：!important
0,1,0,0,0：内联样式、外联样式
0,0,1,0,0：ID选择器
0,0,0,1,0：类选择器、伪类选择器、属性选择器
0,0,0,0,1：元素选择器、伪元素选择器
0,0,0,0,0：通配选择器、后代选择器、兄弟选择器

总体来说，直观权重和微观权重只是表达方式不同，实际意义还是一致的，使用公式可表达成这样。

!important > 内联样式 = 外联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器 > 通配选择器 = 后代选择器 = 兄弟选择器

计算

优先级别相同的规则使用最后出现的规则

.input-box {
    color: #f66;
}
:focus {
    color: #66f;
}
[type=text] {
    color: #f90;
}

@前端进阶之旅: 代码已经复制到剪贴板

虽然类选择器、伪类选择器和属性选择器三者的优先级别相同，但是最后出现的规则其优先级别最高，所以<input>最终会显示#f90。

优先级别无视节点在DOM树中的距离

html h1 {
    color: #f66;
}
body h1 {
    color: #66f;
}

@前端进阶之旅: 代码已经复制到剪贴板

虽然<html>包含着<body>，但是依据就近原则，所以<h1>最终会显示#66f

不同规则作用于相同节点使用优先级别最高的规则

#bruce {
    color: #f66;
}
[id=bruce] {
    color: #66f;
}

@前端进阶之旅: 代码已经复制到剪贴板

虽然两者规则都作用于ID为bruce的<div>，但是ID选择器的优先级比属性选择器高，所以<div>最终会显示#f66。

:not()不参与优先级别的计算

:not()在优先级别计算中不会被看成伪类，但是会把:not()里的选择器当作普通选择器计数。简单来说就是忽略:not()，其他伪类照常参与优先级别计算。

规则

规则的权值不同时，权值高的规则优先
规则的权值相同时，后定义的规则优先
属性后面追加!important时，规则无条件绝对优先

# 长度单位

粗糙的干活可能只需px和%两个长度单位即可，随着终端设备分辨率的多样性，CSS衍生出越来越多的长度单位，灵活结合这些长度单位能为页面的布局方案提供更多可能性。

# 前言

# 优先级别

样式覆盖的根本原因是未处理好规则间的优先级别，虽然使用!important能解决问题，但是不能什么情况都由!important暴力解决

从以下几方面了解优先级别，相信能更好把握优先级别的使用场景。

特点

使用就近原则
继承样式的优先级别最低
!important样式的优先级别最高，若冲突则重新计算

权重

直观权重

10000：!important
1000：内联样式、外联样式
100：ID选择器
10：类选择器、伪类选择器、属性选择器
1：元素选择器、伪元素选择器
0：通配选择器、后代选择器、兄弟选择器

微观权重

1,0,0,0,0：!important
0,1,0,0,0：内联样式、外联样式
0,0,1,0,0：ID选择器
0,0,0,1,0：类选择器、伪类选择器、属性选择器
0,0,0,0,1：元素选择器、伪元素选择器
0,0,0,0,0：通配选择器、后代选择器、兄弟选择器

总体来说，直观权重和微观权重只是表达方式不同，实际意义还是一致的，使用公式可表达成这样。

!important > 内联样式 = 外联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器 > 通配选择器 = 后代选择器 = 兄弟选择器

计算

优先级别相同的规则使用最后出现的规则

.input-box {
    color: #f66;
}
:focus {
    color: #66f;
}
[type=text] {
    color: #f90;
}

@前端进阶之旅: 代码已经复制到剪贴板

虽然类选择器、伪类选择器和属性选择器三者的优先级别相同，但是最后出现的规则其优先级别最高，所以<input>最终会显示#f90。

优先级别无视节点在DOM树中的距离

html h1 {
    color: #f66;
}
body h1 {
    color: #66f;
}

@前端进阶之旅: 代码已经复制到剪贴板

虽然<html>包含着<body>，但是依据就近原则，所以<h1>最终会显示#66f

不同规则作用于相同节点使用优先级别最高的规则

#bruce {
    color: #f66;
}
[id=bruce] {
    color: #66f;
}

@前端进阶之旅: 代码已经复制到剪贴板

虽然两者规则都作用于ID为bruce的<div>，但是ID选择器的优先级比属性选择器高，所以<div>最终会显示#f66。

:not()不参与优先级别的计算

:not()在优先级别计算中不会被看成伪类，但是会把:not()里的选择器当作普通选择器计数。简单来说就是忽略:not()，其他伪类照常参与优先级别计算。

规则

规则的权值不同时，权值高的规则优先
规则的权值相同时，后定义的规则优先
属性后面追加!important时，规则无条件绝对优先

# 长度单位

单位	定义	类型	描述
px	像素	绝对单位	-
pt	点	绝对单位	`1pt = 1/72in`
pc	派	绝对单位	`1pc = 12pt`
mm	毫米	绝对单位

样式计算|CSS专题 | 前端进阶之旅 - 前端求职面试刷题宝典

单位	定义	类型	描述
px	像素	绝对单位	-
pt	点	绝对单位	`1pt = 1/72in`
pc	派	绝对单位	`1pc = 12pt`
mm	毫米	绝对单位