最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
同一元素应用多个class的优先级的测试!
时间:2008-01-11 编辑:简简单单 来源:一聚教程网
使用多个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最优先!
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- css3中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26