博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css样式优先级计算规则
阅读量:5318 次
发布时间:2019-06-14

本文共 743 字,大约阅读时间需要 2 分钟。

css样式的优先级分为引入优先级声明优先级

引入优先级

引入样式一般分为外部样式内部样式内联样式

外部样式:使用link引入的外部css文件。

内部样式:使用style标签书写的css样式。

内联样式:直接书写在html标签里面的css样式。

优先级如下:

内联样式 > 外部样式 = 内部样式

外部样式优先级和内部样式优先级相同,故写在后面的样式会覆盖前面的样式。

声明优先级

一般优先级如下:

  • !important > 内联 > ID > Class|属性|伪类 > 元素选择器
  • :link、:visited、:hover、:active 按照LVHA顺序定义

优先级算法:

等级 内联选择器 ID选择器 类选择器/属性选择器/伪类 元素选择器
示例 <span style="color:red;"></span> #sp{color:red} .sp{color:red}
[type="text"]{color:red}
:nth-of-type(1){color:red}
span{color:red}
优先级 1-0-0-0 0-1-0-0 0-0-1-0 0-0-0-1

注意:

**通配符 * 的优先级为 0-0-0-0,但是优先级大于继承样式优先级。++

优先级算法示例:

    
Document 第一条应该是黄色

转载于:https://www.cnblogs.com/lvonve/p/11250196.html

你可能感兴趣的文章
Django 模型层
查看>>
dedecms讲解-arc.listview.class.php分析,列表页展示
查看>>
安卓当中的线程和每秒刷一次
查看>>
wpf样式绑定 行为绑定 事件关联 路由事件实例
查看>>
TCL:表格(xls)中写入数据
查看>>
Oracle事务
查看>>
String类中的equals方法总结(转载)
查看>>
标识符
查看>>
给大家分享一张CSS选择器优选级图谱 !
查看>>
Node.js 入门:Express + Mongoose 基础使用
查看>>
一步步教你轻松学奇异值分解SVD降维算法
查看>>
objective-c overview(二)
查看>>
python查询mangodb
查看>>
驱动的本质
查看>>
Swift的高级分享 - Swift中的逻辑控制器
查看>>
Python数据分析入门案例
查看>>
vue-devtools 获取到 vuex store 和 Vue 实例的?
查看>>
内存地址对齐
查看>>
创新课程管理系统数据库设计心得
查看>>
Could not resolve view with name '***' in servlet with name 'dispatcher'
查看>>