css绝对是一个能够写到爆炸的东西，so，机智的小北方才不会写各种css样式具体的效果，相比之下更推荐大家记一些常用的key，至于效果，每次用的时候百度下就可以了，
css的作用是对符合条件的标签进行渲染，那么首先就要匹配到对应标签啦，我萌有三种基础的模式来匹配希望改变样式的标签
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #id1 {
8 color: red;
9 }
10
11 .class1 {
12 color: blue;
13 }
14
15 div {
16 color: green;
17 }
18 </style>
19 </head>
20 <body>
21 <div id="id1">id选择器</div>
22 <div class="class1">class类选择器</div>
23 <div>标签选择器</div>
24 </body>
25 </html>
显而易见这三种选择器会对符合条件的标签进行对应渲染，在日常使用中我们最多使用的是类选择器，因为在一个页面中一个id只能对应一个标签，而类选择器则可以赋予多个标签，所以id选择器最具有针对性，它的优先级也是最高的，而类选择器则比标签选择器高
Id > class > 标签
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #id1 {
8 color: red;
9 }
10
11 .class1 {
12 color: blue;
13 }
14
15 div {
16 color: green;
17 }
18 </style>
19 </head>
20 <body>
21 <div id="id1" class="class1">id选择器</div>
22 <div class="class1">class类选择器</div>
23 <div class="class1">标签选择器</div>
24 </body>
25 </html>
好啦，我萌知道了怎么给对应的标签加特效了，duang，但是在有多层级的时候怎么办呢，我又不能给每个标签加上id或者class，因为有很多都是没有必要的，so，此时我萌就要用到层级选择器啦
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 div {
8 color: red;
9 }
10
11 div > div {
12 color: blue;
13 }
14
15 div > div > div{
16 color: green;
17 }
18 </style>
19 </head>
20 <body>
21 <div>
22 <div>
23 <div>3层</div>
24 </div>
25
26 <div>2层</div>
27 </div>
28
29 <div>1层</div>
30 </body>
31 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #id1 ~ div {
8 color: red;
9 }
10 </style>
11 </head>
12 <body>
13 <div id="id1"></div>
14 <div>1层</div>
15 </body>
16 </html>
层级的选择主要使用的就是>，代表去子元素中继续匹配，所以我们可以在首层使用一个id，这样就可以立刻锁定一个标签块的范围然后继续去匹配了
最后还有一个问题，那就是如何使用css呢，我们有三种方法
- 在标签的属性内增加style属性，然后进行编辑，这种方式的优先级最高
- 在head内增加<style>标签然后编辑对应需要匹配标签的效果，这种方式的优先级中等
- 第三种使用<link>标签外联uri引入css，css文件内容与第二种一样只是不需要<style>标签了，这种方式的优先级最低，但是确实我们最常使用的
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" href="main.css">
7 <style>
8 div {
9 color: blue;
10 }
11 </style>
12 </head>
13 <body>
14 <div style="color: red">66666666666666</div>
15 </body>
16 </html>
1 div {
2 color: green;
3 }
为什么我萌最常使用第三种呢？这个在最后的前端优化里会介绍~
时间： 2024-10-14 05:44:54