关于css优先级

css的优先级从低到高依次是:内部样式表的优先级为(1,0,0,0),id选择器优先级为(0,1,0,0),class选择器为(0。0,1,0),tag标签为(0。0,0,1)。除此之外,!important权重最高,比inline style还要高。网址:yii666.com<

从字面意思就知道它最重要。网址:yii666.com

在这里插个题外话。文章来源地址:https://www.yii666.com/article/758312.html

我之前一直错误的以为!important仅仅是css hack的一个写法。

我印象中!important是号称支持到ie7及以上的,不支持ie6的。不知道人没有也这么觉得。。。直到今天我才意识到我的错误。事实上在我知道了!important能够改变css优先级的的时候还知道了ie6也是认识!important的。仅仅只是IE6读取含有!important'的css属性是顺序读取的。这是IE6的一个非常典型的bug。比方:

<style type="text/css">
div{
background: red !important;
background: blue;
}
</style> ­

这个结果是div的背景为blue;假设这样:文章来源地址https://www.yii666.com/article/758312.html

<style type="text/css">
div{
background: blue;
background: red !important;
}
</style> ­

把两个属性倒换位置。结果背景为red。这说明IE6并不会对!important开放特权。文章地址https://www.yii666.com/article/758312.html

而是一视同仁。

比如:

情形一:div.test1 .span a 优先级 (0,0,2,2)。
情形二:span#xxx .songs li 优先级(0,1,1,2);

情形三:#xxx li 优先级 100 +1 (0,1,0。1);

直接上代码:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div .aa{color:orange;}/*(0,0,1。1)*/
.bn .aa{color:red;}/*(0。0。2,0)*/
#bb .aa{color:yellow;}/*(0。1,1,0)*/
#bb a{color:blue;}/*(0,1,0,1)*/
</style>
</head>
<body>
<div id="bb" class="bn">
<a style="color:gray;" href="#" class="aa">link</a>
<div>
</body>
</html>

代码运行后,link字体的颜色为gray,由于内部样式表的优先级最高。为(1,0,0。0)。

可是假设。给div .aa{color:orange!important;}这样一个属性,那么link字体的颜色就是orange了。

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

关于css优先级-相关文章

  1. slurm使用

  2. 026、Java中改变运算优先级

  3. javascript中运算符的优先级

  4. 关于css优先级

  5. (转载)C#线程优先级详解

  6. 《windows核心编程系列 》六谈谈线程调度、优先级和关联性

  7. 第12章 Linux系统管理

  8. Linux usual cmd

    日常工作时常需要用到,在此备份一下:《1》 top命令第一行:当前系统时间为23:31:59,系统已经运行了127天又19小时47分钟,当前系统只要一个用户即root,load average分别为1、5、15分钟的负载情况。注:load average数据是每隔5秒钟检查一次活跃的进程数,然后按特定算法计算

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png