同一元素应用多个class的优先级的测试!

同一元素应用多个class的优先级的测试!

使用多个class,以空格分开,如:<span class=”a2 a1″>

效果:

Source Code to Run [www.fun52.com]

.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 [www.fun52.com]

.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 [www.fun52.com]

.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最优先!

同一元素应用多个class的优先级的测试!

相关文章:

你感兴趣的文章:

标签云: