什么是权重?
- CSS 是层叠样式表, 如果一个元素上面有多个样式, 如果多个样式有冲突, 用哪个?
- 孩子在写作业, 老爸说写完了可以玩游戏, 老妈说写完了需要练字, 听谁的?
- 这些都需要权重, 谁的权重大, 就听谁的
举例
有如下代码, 那么 h1 里面的文字, 应该是红色, 还是绿色?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.title {
color: red;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1 class="title">this is h1</h1>
</body>
</html>
答案(class 的权重更高)
CSS 都有哪些权重?
- 是时候祭出这张神图了!
- 一张图搞定 CSS 权重
解释一下
再回到开始的那张图
为什么颜色是红色?
- 类选择器的权重是
0-1-0
- 标签选择器的权重是
0-0-1
- 比较规则是从左往右, 依次对比, 如果出结果, 就结束, 所以比到第二位结束
再举一个例子
id选择器
的权限高于标签+类+伪类
- 因为
id选择器
权重, 最左边是 1, 而标签+类+伪类
权重最左边是 0
行内样式碾压所有选择器
!import 秒一切!
看到那颗原子弹了吗? "我优先级最高, 谁有意见?"
CSS 继承
- 我们知道, HTML 是由层级结构的
- 所谓继承, 就是子元素会继承父元素的**
部分
**CSS 样式, 注意是部分样式
- 并不是所有的样式都会被继承, 比如 border 就没有继承
哪些 CSS 样式可以继承?
- 可以被继承的 CSS 样式如下:
- 这么多, 脑子不够用了...
- 记住常用的就行了...
- 最后别忘了, 还有
color
继承的权重
- 继承有权重吗?
- 继承的权重是
null
- 我们知道, 通配符的权重是
0-0-0
- 所以如果通配符和继承发生冲突...
- 看如下代码, 说出结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
div {
color: red;
}
* {
color: blue;
}
</style>
</head>
<body>
<div>hello world <span>!!!</span></div>
</body>
</html>
- 感叹号是红色还是蓝色?
- 不磨叽, 放结果...
- 可以得出如下结论
0-0-0 > null
- 所以如果需要给所有元素加样式, 建议把
*
改成html
html {
color: blue;
}