展会信息港展会大全

同一元素应用多个class的优先级的测试!
来源:互联网   发布日期:2016-03-25 16:35:07   浏览:2578次  

导读:使用多个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 a...

使用多个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最优先!

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
推荐内容
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港