最新下载
热门教程
- 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最优先!
相关文章
- Hyperliquid (HYPE) 价格预测:MACD指标趋缓,41美元阻力位成为主要障碍 07-07
- 神奇海洋7月5日今日答案2025 07-07
- 三角洲行动黑鹰坠落彩蛋位置一览 07-07
- PI是什么币种?PI币前景与白皮书全面介绍 07-07
- 不良人破局装备获取途径 07-07
- 萤火突击兑换码有哪些-萤火突击兑换码兑换码一览 07-07