首页 / CSS / CSS样式之优先级-猴子猿
CSS样式之优先级-猴子猿
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS样式之优先级-猴子猿,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2064字,纯文字阅读大概需要3分钟。
内容图文
![CSS样式之优先级-猴子猿](/upload/InfoBanner/zyjiaocheng/410/19ebc5bfbff943a7bb994726bb3ea27a.jpg)
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出现的顺序。
如下:
![CSS样式之优先级-猴子猿 - 文章图片](/upload/getfiles/0001/2021/4/23/20210423083907098.jpg)
![CSS样式之优先级-猴子猿 - 文章图片](/upload/getfiles/0001/2021/4/23/20210423083907128.jpg)
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样式之优先级-猴子猿所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。