Manchan's blog Manchan's blog
首页
  • 前端文章

    • HTML5
    • CSS3
    • JavaScript
  • 学习笔记

    • CSS选择器世界
地信
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 旧版博客
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
友链
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

まん酱

一个正在学习中的GISer~
首页
  • 前端文章

    • HTML5
    • CSS3
    • JavaScript
  • 学习笔记

    • CSS选择器世界
地信
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 旧版博客
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
友链
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 《CSS选择器世界》

    • 概述
    • CSS选择器的优先级
      • CSS优先级规则概览
      • 深入CSS选择器优先级
    • CSS选择器的命名
    • 精通CSS选择符
    • 元素选择器
    • 属性选择器
    • 用户行为伪类
    • URL定位伪类
    • 输入伪类
    • 树结构伪类
  • 学习笔记
  • 《CSS选择器世界》
GIS君-manchan
2022-11-20
目录

CSS选择器的优先级

几乎所有的 CSS 样式冲突、样式覆盖等问题都与 CSS 声明的优先级错位有关。因此,在详细阐述 CSS 选择器的优先级规则之前,我们先快速了解一下 CSS 全部的优先级规则。

# CSS选择器的优先级

几乎所有的 CSS 样式冲突、样式覆盖等问题都与 CSS 声明的优先级错位有关。

# CSS优先级规则概览

  1. 通配选择器、选择符和逻辑组合伪类。

    通配符选择器(*) ,选择符 +,>,~,空格,||,逻辑组合伪类 :not(),:is() ,:where。

    提示

    :not()和 :is()的优先级将由其逗号分割的参数中优先级最高的选择器指定,而 :where()的优先级 为0

  2. 标签选择器。

    body {color:#333;}
    
    1
  3. 类选择器、属性选择器和伪类。

    .foo { color: #666; }
    [foo] {color: #666; }
    :hover { color: #333; }
    
    1
    2
    3
  4. ID选择器

    #foo {coleor:#fff}
    
    1
  5. style内联属性

    <span style="color: #ccc;“>优先级</span>
    
    1
  6. !important

    .foo { color: #fff !important; }
    
    1

    !important是顶级优先级,唯一推荐使用的场景是使JavaScript设置无效。

# 深入CSS选择器优先级

# CSS 选择器优先级的计算规则

对于 CSS 选择器优先级的计算,业界流传甚广的是数值计数法。

具体如下:每一段 CSS语句的选择器都可以对应一个具体的数值,数值越大优先级越高,其中的 CSS 语句将被优先渲染。其中,出现一个0级择器,优先级数值+0;出现一个1级选择器,优先级数值+1;出现个2级选择器,优先级数值+10;出现一个 3 级选择器,优先级数值+100。

选择器 计算值 计算细则
* {} 0 1个0级通配选择器, 优先级数值为0
dialog {} 1 1个1级标签选择器,优先级数值为1
ul > li {} 2 2个1级标签选择器,1个0级选择符,优先级数值为1+0+1
li > ol + ol {} 3 3个1级标签选择器,2个0级选择符,优先级数值为 1+0+1+0+1
.foo {} 10 1个2级类名选择器,优先级数值为10
a:not([rel=nofollow]) {} 11 1个1级标签选择器,1个0级否定伪类,1个2级属性 选择器,优先级数值为1+0+10
a:hover {} 11 1个1级标签选择器,1个2级伪类,优先级数值为1+10
ol li.foo {} 12 1个2级类名选择器,2个1级标签选择器,1个0级空 格选择符,优先级数值为1+0+1+10
li.foo.bar {} 21 2个2级类名选择器,1个1级标签选择器,优先级数值 为10×2+1
#foo {} 100 1个3级D选择器,优先级数值为100
#foo .bar p {} 111 1个3级ID选择器,1个2级类名选择器,1个1级标签 选择器,优先级数值为100+10+11

对于相同优先级数值的选择器,具有“后来居上”的规则,即层叠性。

提示

CSS选择器的优先级与DOM元素的层级关系没有任何关系。

# 增加CSS选择器优先级的小技巧

.foo { color: #333; }
/*增加嵌套*/
father .foo {}
/*增加一个标签选择器*/
div.foo {}

/*重复选择器本身*/
.foo.foo {}
/*借助属性选择器*/
.foo[class] {}
#foo[id] {}

/*借助伪类选择器*/
#foo:not(#bar)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
微信 支付宝
#CSS#CSS选择器
文章更新于: 2022/11/25 19:40:50
概述
CSS选择器的命名

← 概述 CSS选择器的命名→

最近更新
01
文档
02-03
02
前端面试学习
01-02
03
Markdown首行缩进
12-01
更多文章>
Theme by Vdoing | Copyright © 2020-2023 Manchan All rights reserved.
鄂ICP备2020015911-1号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式