写点什么

【CSS 学习总结】第三篇 - CSS 选择器的权重和优先级

作者:Brave
  • 2021 年 12 月 23 日
  • 本文字数:837 字

    阅读完需:约 3 分钟

一,前言


上一篇,主要介绍了 HTML 扩展内容;部分,包含以下内容:


  • HTML 的文档声明;

  • meta 元信息;

  • HTML Entity 字符实体;


从本篇开始,进入 CSS 选择器部分的介绍;


当项目结构比较复杂时,容易出现一个元素同时被添加多个样式的情况

这时可能会出现问题:明明写好的样式却被覆盖掉了。。。


那么,CSS 样式覆盖的问题,是否会遵循某种规律呢?

这里就涉及到选择器的权重和优先级的概念;


本篇,将介绍 CSS 选择器的权重和优先级;


二,CSS 的三大特性


  • 继承性:元素能够继承父元素的某些样式属性;

  • 优先级:决定了两个元素发生覆盖时,谁将被覆盖;

  • 层叠性:重复代码会发生合并,只有一个真正起作用;



三,CSS 选择器的优先级



MDN:CSS 优先级

总结一下,以下选择器对优先级没有影响:


  • 通配选择器:*

  • 关系选择器:+>~' '

  • 否定伪类::not();(注意,在:not()内部声明的选择器会影响优先级)


四,CSS 选择器优先级的计算


  • 择器会被划分为 4 个等级(排除了 10000 和 0000),每个等级就代表了一类选择器;

  • 优先级总值 = 各等级的选择器个数 * 对应等级权值的总和;


CSS 优先级的计算遵循以下规则:


  • 元素标签中定义了的内联样式,积 1,0,0,0 分;

  • 每个 id 选择器,积 0,1,0,0 分;

  • 每个 class 选择器、属性选择符、伪类,积 0,0,1,0 分;

  • 每个 元素选择器、伪元素选择器,积 0,0,0,1 分;


备注:


  • 伪类 :not() 本身不具有任何优先级,但在它的括号内的内容会被累计到优先级值中;


五,CSS 选择器的权重


优先级顺序:

!important > 内联样式 > id 选择器 > class 选择器 > 标签选择器 > 通配符 > 继承 > 浏览器默认;


  • !important:优先级最高;

  • 元素属性:较高优先级;

  • 相同权重下:后面覆盖前面的;


六,面试题


CSS 选择器的权重和优先级的考察,一般会给出一段代码,问最终显示的效果,即判断谁覆盖了谁,为什么;


todo:面试题


七,结尾


本篇,主要介绍了 CSS 选择器部分,主要涉及一下几点:


  • CSS 的三大特征;

  • CSS 选择器的优先级;

  • CSS 优先级的计算规则;

  • CSS 选择器的权重;

  • CSS 选择器面试题;


下一篇,介绍 CSS 选择器伪类和伪元素;

用户头像

Brave

关注

还未添加个人签名 2018.12.13 加入

还未添加个人简介

评论

发布
暂无评论
【CSS 学习总结】第三篇 - CSS 选择器的权重和优先级