CSS 选择器优先级

  • CSS 选择器优先级已关闭评论
  • 96 次浏览
  • A+
所属分类:Web前端
摘要

声明:本文参考来源于MDN CSS 优先级(80%)和B站尚硅谷的课程(20%)我想你一定是来进行速查的,所以我会尽量精简文章内容,保证不浪费时间,不说废话


CSS 选择器权重

声明:本文参考来源于MDN CSS 优先级(80%)和B站尚硅谷的课程(20%)

我想你一定是来进行速查的,所以我会尽量精简文章内容,保证不浪费时间,不说废话

文章包括新的:is:where(实验性)说明

优先级:概念

优先级就是分配给 CSS 声明的一个权重,由 匹配的选择器中的 每一种选择器类型的 数值 决定。

多个 CSS 优先级相等的时候,最后的那个选择器将会被应用到元素上。

注意:文档树中元素的接近度对优先级没有影响。

速查:六点

  1. 格式:(1 | 0,a,b,c)
  • 1 | 0: 是否有!important
  • a: id的个数
  • b: .class :matix [key]的个数
  • c: el, ::el 的个数
  1. 冲突比较:从左到右,后来居上
  2. 简记:
  • !imp > 行内 > id > .class > el > 通配符 > 继承
  1. 如果有!imp,那么即使是jsDOM也无法修改
  2. 提示:VSCode能自动计算权重
  3. 注意:
  • :not:is本身对优先级没有影响,但是,在 :not和is内部声明的选择器会影响优先级
  • :where() 和其中的选择器的优先级是 0

比较:后来者居上,a>b>c

  1. 从左到右:a->b->c,从左到右比较
/* A选择器:(0,2,3) */ :is(h1) div:nth-child(2n):not(p:selected)  /* B选择器:(0,2,1) */ h1 div.headtext[needcolor]  /* 1. 0=0 2. 2=2 3. 3>1 4. A选择器胜出 */ 
  1. 后来居上:前面写的被后来覆盖(前提:后者优先级>=前者)
<link href="foo.css"> <link href="bar.css">  <TodoList /> <!-- green --> 
/* foo.css */ TodoList {   color: red; } /* bar.css */ TodoList {   color: green; } 
  1. 无影响者:通配选择符(*)关系选择符(+, >, ~, " ", ||)和 否定伪类:not()对优先级没有影响

!important:核弹级声明

当在一个样式声明中使用它,此声明将覆盖任何其他声明

无视:DOM树

什么意思?直接上代码

body h1 {   color: green; }  /* 后来居上 */ html h1 {   color: purple; }  
<html>   <body>     <h1>Here is a title!</h1>   </body> </html> 

h1将被渲染成紫色。

其他:关于where选择器

实验性: 这是一项实验性技术,在将其用于生产之前,请仔细检查MDN浏览器兼容性表格
给你康好了QAQ:

  • Chrome 88+
  • Firefox 78+
  • Safari 14+
  • IE ??? 早没有了

工具:计算优先级

如果你的编辑器没有查看优先级的功能

那么这是一个网站,供你计算优先级:Specificity Calculator