最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
同一元素应用多个class的优先级的测试!
时间:2022-07-02 12:45:07 编辑:袖梨 来源:一聚教程网
使用多个class,以空格分开,如:
效果:
代码如下 | 复制代码 |
.a1 { font-size: 9pt; color: #FF0000; } .a2 { font-size: 18pt; color: #0000FF; } .a1 { font-size: 9pt; color: #FF0000; } .a2 { font-size: 18pt; color: #0000FF; } a1 a2 a2 a1 a1 a2 |
[ 可先修改部分代码 再运行查看效果 ]
调换一下a1和a2的顺序 Source Code to Run []
代码如下 | 复制代码 |
.a2 { font-size: 18pt; color: #0000FF; } .a1 { font-size: 9pt; color: #FF0000; } .a2 { font-size: 18pt; color: #0000FF; } .a1 { font-size: 9pt; color: #FF0000; } a1 a2 a2 a1 a1 a2 |
[ 可先修改部分代码 再运行查看效果 ]
加上!important看看效果 Source Code to Run []
代码如下 | 复制代码 |
.a2 { font-size: 18pt; color: #0000FF!important; } .a1 { font-size: 9pt; color: #FF0000; } .a2 { font-size: 18pt; color: #0000FF!important; } .a1 { font-size: 9pt; color: #FF0000; } a1 a2 a2 a1 a1 a2 |
[ 可先修改部分代码 再运行查看效果 ]
结论:若同时应用多个class,后定义的优先(即近者优先),加上!important最优先!
相关文章
- 王者荣耀明世隐夜落电台怎么获得 明世隐夜落电台上架介绍 05-09
- 原神虹色巡回第二阶段怎么攻略 原神虹色巡回第二阶段完成方法 05-09
- 恋与深空银月流烁夜活动怎么玩 恋与深空银月流烁夜活动玩法介绍 05-09
- 王者荣耀西游英雄怎么领 王者荣耀送西游主题资源活动介绍 05-09
- 币宝交易所3.0官网版 05-09
- coinbene满币交易所官网版 05-09