同一元素应用多个class的优先级的测试！
发布时间：2023-05-10 编辑：jiaochengji.com
教程集为您提供同一元素应用多个class的优先级的测试！等资源，欢迎您收藏本站，我们将为您提供最新的同一元素应用多个class的优先级的测试！资源
使用多个class，以空格分开，如：<span class="a2 a1">
效果：
| 代码如下 | |
| .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最优先！
您可能感兴趣的文章：
[关闭]