关于css优先级

最新推荐文章于 2024-02-29 22:12:30 发布

西泊浪人

最新推荐文章于 2024-02-29 22:12:30 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签：字体 css color class

本文链接：https://blog.csdn.net/westernRanger/article/details/40007153

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

css的优先级从低到高依次是：内部样式表的优先级为（1，0，0，0），id选择器优先级为（0，1，0，0），class选择器为（0，0，1，0），tag标签为（0，0，0，1）。除此之外，!important权重最高，比inline style还要高。从字面意思就知道它最重要。

在这里插个题外话。我之前一直错误的以为!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；如果这样：

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

把两个属性倒换位置，结果背景为red。这说明IE6并不会对!important开放特权。而是一视同仁。

例如：

情形一：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了。

西泊浪人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于css优先级

!important权重最高，比inline style还要高。内部样式表的优先级为（1，0，0，0），id选择器优先级为（0，1，0，0），class选择器为（0，0，1，0），标签为（0，0，0，1）。
复制链接

扫一扫

专栏目录