CSS样式优先级

发表于 | 分类于

随着页面的复杂性，一个标签的样式受到越来越多因素的影响。
从两个角度来看CSS样式的优先级

1.CSS的继承性
2.选择器的优先级

CSS的继承性

rule 1:

离得越近的祖先优先级越高（爸爸比爷爷对儿子管的权力大 –！）

rule 2:

内联样式比祖先样式优先级高（自己的路自己走）

选择器的优先级

rule 3:

优先级关系：内联样式 >
ID 选择器 >
类选择器 = 属性选择器 = 伪类选择器 >
标签选择器 = 伪元素选择器

rule 4:

ID 选择器 个数a
类选择器、属性选择器、伪类选择器 个数b
标签选择器、伪元素选择器 个数c

依次比较a b c的大小，如果都相等，则“就近原则”

rule 5:

属性后插有！important的属性拥有最高优先级，若同时拥有，则利用rule3、4比较

1
2
3
p {
    background: red !important;
}

注意：按照加权值的说法 100 10 1,11个类选择器和1个ID选择器，按计算110>100,实际仍按ID样式来，原因在于
选择器权值不能进位
1000个类选择器权值为99.9999…. < 100 (瘦死的ID比类大…)

比较了link和@import

1
2
3
4
5
6
7
8
9
10
//链接方式指的是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
//导入方式指的是使用 CSS 规则引入外部 CSS 文件。
<style>
    @import url(style.css);
</style>

  • link 属于 HTML，通过 标签中的 href 属性来引入外部文件，而 @import 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件；

  • @import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件

  • 当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；