一聚教程网:一个值得你收藏的教程网站

热门教程

同一元素应用多个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最优先!

热门栏目