hn-failte's blog hn-failte's blog
首页
  • 前端文章

    • JavaScript
    • Vue
    • React
    • Webpack
    • 混合开发
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《React》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • HTML&CSS
  • HTML
  • CSS
  • CSS预处理
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 算法
  • 数据库
  • 操作系统
  • 工具
  • 学习
  • 面试
  • 心情杂货
  • 前端相关
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

hn-failte

前端cv仔
首页
  • 前端文章

    • JavaScript
    • Vue
    • React
    • Webpack
    • 混合开发
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《React》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • HTML&CSS
  • HTML
  • CSS
  • CSS预处理
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 算法
  • 数据库
  • 操作系统
  • 工具
  • 学习
  • 面试
  • 心情杂货
  • 前端相关
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • HTML&CSS

    • CSS布局模型详细介绍
    • flex布局
    • 1ink与@import的区别
    • CSS样式之内容居中方法
    • DIV+CSS布局
    • 有趣的list-style
    • CSS选择符的权重
      • CSS选择符的权重
      • 目录
      • css选择符权重
    • 浏览器异步加载JS的方法
  • HTML

  • CSS

  • CSS预处理

  • 页面
  • HTML&CSS
hn-failte
2018-02-13

CSS选择符的权重

# CSS选择符的权重

# 目录

  • css选择符权重
    • css选择器权重列表
    • CSS选择符冲突处理

# css选择符权重

# css选择器权重列表

选择器		权重
内联样式		1000
ID			0100
CLASS		0010
属性选择符	0010
TAG			0001
伪元素		0001
伪类			0001
inhref		0000
群组选择符	不变
后代选择符	相加

# CSS选择符冲突处理

1、权重不同:选择符的css发生冲突时,拥有高权值的css选择符将会显示

2、权重相同:选择符权重一样,将会按照加载顺序进行覆盖(就近原则)

3、a和a:link同时存在时,以a:link优先,注:使用a的伪类时,需要四个伪类(a:link、a:hover、a:active、a:visited)同时使用

4、!important的权重为正无穷

编辑 (opens new window)
#CSS
上次更新: 2021/08/05, 12:37:41
有趣的list-style
浏览器异步加载JS的方法

← 有趣的list-style 浏览器异步加载JS的方法→

最近更新
01
基于 Taro 的微信小程序优化指南
02-16
02
搭建一个极简混合开发架构
08-03
03
使用State Hook
04-06
更多文章>
Theme by Vdoing | Copyright © 2017-2023 hn-failte | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式