《CSS学习之路》003-CSS权重和继承

676 阅读3分钟

什么是权重?

  • 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 的权重更高)

1586054292785

CSS 都有哪些权重?

  • 是时候祭出这张神图了!
  • 一张图搞定 CSS 权重

1586056539987

解释一下

再回到开始的那张图

1586054292785

为什么颜色是红色?

  • 类选择器的权重是0-1-0
  • 标签选择器的权重是0-0-1
  • 比较规则是从左往右, 依次对比, 如果出结果, 就结束, 所以比到第二位结束

1586057082257

再举一个例子

1586057553611

  • id选择器的权限高于标签+类+伪类
  • 因为id选择器权重, 最左边是 1, 而标签+类+伪类权重最左边是 0

1585993381909

行内样式碾压所有选择器

1586058296547

1585993381909

!import 秒一切!

看到那颗原子弹了吗? "我优先级最高, 谁有意见?"

1586058591582

1585993381909

CSS 继承

  • 我们知道, HTML 是由层级结构的

1585993381909

  • 所谓继承, 就是子元素会继承父元素的**部分**CSS 样式, 注意是部分样式

1585993381909

1586064089791

  • 并不是所有的样式都会被继承, 比如 border 就没有继承

1585993381909

哪些 CSS 样式可以继承?

  • 可以被继承的 CSS 样式如下:

1586064393076

  • 这么多, 脑子不够用了...

1586064534524

  • 记住常用的就行了...

1586064577283

1586064598948

  • 最后别忘了, 还有color

继承的权重

  • 继承有权重吗?
  • 继承的权重是null
  • 我们知道, 通配符的权重是0-0-0

1586064985057

  • 所以如果通配符和继承发生冲突...
  • 看如下代码, 说出结果
<!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>
  • 感叹号是红色还是蓝色?
  • 不磨叽, 放结果...

1586065132470

  • 可以得出如下结论
0-0-0 > null
  • 所以如果需要给所有元素加样式, 建议把*改成html
html {
    color: blue;
}

快速跳转