CSS样式优先级与权重计算方式
CSS一共有四种样式控制方式:行内样式、内嵌样式、链接样式、导入样式(@import).选择器则有标签选择器,类名选择器,ID选择器,和伪标签选择器四种.那么它们的优先级与权重又是计算的呢?
首先上权重计算方法:
一.内联 > id > class >标签
权重计算数值
1.内联样式 1000
2.id样式 0100
3.class样式 0010 hover,nth-child()等CSS3"伪标签"权重与"真-class"相同;
4.标签样式 0001以后是权重计算数值,也就是说,ul li a{}中的样式,将会比li a{}级别更高,因而
<ul>
<li>
<a>test</a>
</li>
</ul>
<style>
ul li a{ //权重等于0003
color:red
}
li a{ //权重等于0002
color:blue
}
</style>
中的test字体颜色将会是红色而非蓝色.而当样式设置位于同一种样式控制方式,比如全为链接时候,将会后者覆盖前者(CSS叠加样式表是进行样式的不断叠加,因而同一权重,后者会覆盖前者).
二,同权重,样式设置方式不同
而当样式设置权重相同但位于不同样式设置方式时,将会按照
行内样式>内嵌样式>链接样式.进行样式叠加.也就是说
假如
<ul>
<li>
<a>test</a>
</li>
</ul>
<style>
ul li a{ //权重等于0003,但是位于链接样式中
color:red
}
ul li a{ //权重等于0003,但是位于内嵌样式中
color:blue
}
</style>
而这一次,test文字的字体颜色将为蓝色.
三.导入样式(@import)与内嵌样式
至于导入样式(@import)则是将其导入到内嵌样式中,故而其优先级与内嵌样式相同,同样符合叠加原理,或者说就近原则.
<link href="test.css" type="text1/css" rel="stylesheet">
<title>新建网页标题</title>
<style>
@import "test2.css";
</style>
</head>
<body>
// 此时同权重样式会显示"@import中的",而非"<link/>"中的
<title>新建网页标题</title>
<style>
@import "test2.css";
</style>
<link href="test.css" type="text1/css" rel="stylesheet">
</head>
<body>
// 此时同权重样式会显示"<link/>中的,而非@import"中的
四,测试声明
本文所言均已经经过本人测试,而本文则是为了整理以往的网络材料,并修正其他前辈们的一些错误,如果你发现了本文中的一些错误,遗漏或者对此有什么疑问,请在博文下方留言,本人会及时回复.以下是本人的测试环境.
本文章中测试环境,如下:
谷歌版本: 50.0.2652.2 (64-bit);
Opera:36.0.2130.32 ,Windows 10 64-bit (WoW64);
火狐:44.0.2;
IE:11.162.10586.0;
