CSS样式之优先级
来源:互联网 发布:brew install java 编辑:程序博客网 时间:2024/06/07 13:20
说到到css的样式优先级,今天偶再来回顾下,从css的样式优先级可分为两个部分:
1、从CSS代码放置的位置看权重优先级:
内联样式 > 内部嵌入样式 >外联样式
2、从样式选择器的权重优先级:
Important > 内联样式 > ID > 类、伪类、属性选择器 > 标签、伪元素 > 通配符
今儿,我们重点来看看第2点—样式选择器。
请看以下代码:
<!DOCTYPE html> <head> <title>css</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> div.class1 { background:pink; } .class2 { background:green; } </style> </head> <body> <div class="class1 class2" style="width:100px;height:100px;"></div> </body></html>
运行代码,效果图如下:
是粉红色。按照上面的说法class1、class2不都属于类嘛。既然优先级一样,那不就应该是后面的class2(绿色)覆盖住class1(粉红色)吗?
是的。类是属于同一级,但是div.class1和.class2的优先权重是不一样的。
请看下表:
选择器
权重
!important
1,0,0,0
ID
0,1,0,0
类、伪类、属性选择器
0,0,1,0
标签、伪元素
0,0,0,1
通配符
0,0,0,0
当我们看到html代码时,不要单一看它调用的是什么样式,比如上面的class1、class2在放在div标签上时,都一样,类嘛
但是,其实它们的权重是不一样的。所以要追踪到css样式中,查看它们的权重。
这个权重的计算方法就是利用上面表中对应的权重值,叠加,得到最终值。值越大,权重就越大,从而优先级也就越高咯。
如上面代码中的class1、class2:
结合上面中列出的权重,从而可得class1和class2的权重
class1 = div(0001)+.class1(0010) = 0011
class2 = .class2(0010) = 0010
class1的权重大于class2的权重,从而class1的优先级就高于class2咯。
所以,<div class=”class1 class2”>显示class1的粉红色咯 。
下面列举了几个css表达式的权重值,自我测试下:
css选择器表达式
权重值
h1 + *[rel = up ]
0011
li.red.level
0021
#test:not(ii)
0110
#test:before
0101
好了,那当样式的优先级一样呢?那就得看它们出现的顺序了。后出现的覆盖前面的。
注意:是样式表中的顺序,而不是html标签中class出现的顺序。
如下:
<!DOCTYPE html> <head> <title>css</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .class2 { background:green; } .class1 { background:pink; } </style> </head> <body> <div class="class1 class2" style="width:100px;height:100px;"></div> </body></html>
- CSS样式之优先级
- [程序员入行必备]CSS样式之优先级
- 样式优先级CSS优先级CSS样式权重
- css样式优先级
- css样式优先级
- CSS样式优先级判定
- 关于CSS样式优先级
- CSS样式的优先级...
- 关于CSS样式优先级
- CSS样式优先级
- CSS样式优先级
- CSS样式优先级
- css样式优先级
- CSS样式优先级
- css多重样式优先级
- CSS样式的优先级
- CSS样式优先级
- 关于CSS样式优先级
- 数据库基础知识六
- 参加CCF CSP认证者须知
- 把数组排成最小的数
- iOS设计模式之简单工厂模式
- xslt转换xml
- CSS样式之优先级
- 1016. Phone Bills (25)
- MongoDB高可用集群配置的几种方案
- tcpdump必杀技
- jQuery 语法
- 超小白教程之插入排序法
- Kubernetes网络接口(CNI) midonet网络插件设计与实现
- JavaScript之单例实战
- CF