freeCodeCamp中文站: https://freecodecamp.cn
作为一个前端菜鸟，最缺的就是项目经验了。经人指点，说可以到freeCodeCamp来打怪升级。无奈这个网站是英文的，而我的英语又不在地。好在现在有了中文版的freeCode。
好吧，从此可以愉快滴刷题了！
刷题的过程，也是查漏补缺，复习知识点的过程，这里把一些以前忽视或者不明确的知识点整理记录下来。今天算是第一期，关于CSS优先级。
前提准备
优先级测试（从低到高）
Level 1 ：单独class样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS 优先级测试</title>
<style>
.blue-text {
color:blue;
}
</style>
</head>
<body>
<h2 class="blue-text">测试文字</h2>
</body>
</html>
|
显示结果如下：
这个没什么好说的。
Level 2 如果两个class样式相冲突，以后一个为准
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS 优先级测试</title>
<style>
.blue-text {
color:blue;
}
.red-text { /*后写的red-text比先前的red-text级别高*/
color:red;
}
</style>
</head>
<body>
<h2 class="blue-text red-text">测试文字</h2>
</body>
</html>
|
显示结果如下：
Level 3 ：加在id上的CSS优先级高于class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS 优先级测试</title>
<style>
.blue-text {
color:blue;
}
.red-text { /*后写的red-text比先前的red-text级别高*/
color:red;
}
#yellow-text { /*id写的CSS优先级高于class加的样式*/
color:yellow;
}
</style>
</head>
<body>
<h2 id="yellow-text" class="blue-text red-text">测试文字</h2>
</body>
</html>
|
显示结果：
看吧，是不是屎黄屎黄的？（太恶心了）
Level 4 ：行间样式优先级高于id上加的样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS 优先级测试</title>
<style>
.blue-text {
color:blue;
}
.red-text { /*后写的red-text比先前的red-text级别高*/
color:red;
}
#yellow-text { /*id写的CSS优先级高于class加的样式*/
color:yellow;
}
</style>
</head>
<body>
<h2 style="color:pink" id="yellow-text" class="blue-text red-text">测试文字</h2>
<!--行间样式的级别要高于id上加的样式-->
</body>
</html>
|
显示结果如下：
好吧，style越来越诡异了
level 5 ：传说中最高级别的大boss ‘!important’
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS 优先级测试</title>
<style>
.blue-text {
color:blue !important; /*!important 优先级最高*/
}
.red-text { /*后写的red-text比先前的red-text级别高*/
color:red;
}
#yellow-text { /*id写的CSS优先级高于class加的样式*/
color:yellow;
}
</style>
</head>
<body>
<h2 style="color:pink" id="yellow-text" class="blue-text red-text">测试文字</h2>
<!--行间样式的级别要高于id上加的样式-->
</body>
</html>
|
显示结果如下：
看吧，boss出手，传说中的blue又回来了。
写在最后：这些知识点虽然不难，但却是之前在学习中一直忽略的内容，正好借此机会补齐。
