CSS选择器及其优先级

选择器 格式 优先级权重
id选择器 #id 100
类选择器 #classname 10
属性选择器 a[ref=“eee”] 10
伪类选择器 li:last-child 10
标签选择器 div 1
伪元素选择器 li:after 1
相邻兄弟选择器 h1+p 0
子选择器 ul>li 0
后代选择器 li a 0
通配符选择器 * 0

对于选择器的优先级

  • 标签选择器、伪元素选择器:1
  • 类选择器、伪类选择器、属性选择器:10
  • id 选择器:100
  • 内联样式:1000

注意事项:

  • !important声明的样式的优先级最高;
  • 如果优先级相同,则最后出现的样式生效;
  • 继承得到的样式的优先级最低;
  • 通用选择器(*)、子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以它们的权值都为 0 ;
  • 样式表的来源不同时,优先级顺序为:内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

相关推荐

  1. CSS选择及其优先级

    2024-02-07 02:08:01       52 阅读
  2. 描述CSS选择及其优先级规则

    2024-02-07 02:08:01       39 阅读
  3. 【前端学习——css篇】2.css选择优先级

    2024-02-07 02:08:01       47 阅读
  4. CSS 选择优先级详解及实例演示

    2024-02-07 02:08:01       43 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-07 02:08:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-07 02:08:01       100 阅读
  3. 在Django里面运行非项目文件

    2024-02-07 02:08:01       82 阅读
  4. Python语言-面向对象

    2024-02-07 02:08:01       91 阅读

热门阅读

  1. docker安装gitlab-runner

    2024-02-07 02:08:01       49 阅读
  2. 2.5学习总结9

    2024-02-07 02:08:01       45 阅读
  3. DBA不仅仅是管理数据库--也要管理中间件

    2024-02-07 02:08:01       57 阅读
  4. 记录 | python isinstance()用法

    2024-02-07 02:08:01       63 阅读
  5. 关于RabbitMQ常见的十道面试题

    2024-02-07 02:08:01       49 阅读
  6. 【数据结构 10】位图

    2024-02-07 02:08:01       50 阅读