CSS 三大特性：继承性、层叠性、优先级
继承性
子级默认继承父级的文字控制属性，若子级有自己的样式则不继承
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
body {
font: 30px/0.5 楷体;
color: aqua;
}
</style>
<body>
<div>div</div>
<p>p</p>
<span>span</span>
<a href="#">不继承颜色</a>
</body>
层叠性
选择器类型相同时：
- 相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性
- 不同的属性会叠加：不同的 CSS 属性都生效
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
div {
color: red;
font-size: 30px;
}
div {
color: aqua;
font-weight: 700;
}
</style>
<div>
颜色为 aqua，字号 30px，加粗
</div>
优先级
当一个标签使用了多种选择器时，优先级高的样式生效，优先级：
通配符选择器 < 标签选择器 < 类选择器 < id 选择器 < 行内样式 < !important
一般不使用 !important ，下例不使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
#app {
color: orange;
}
.box {
color: blue;
}
div {
color: red;
}
* {
color: purple;
}
</style>
<div>标签选择器 red</div>
<div class="box">类选择器 blue</div>
<div class="box" id="app">id 选择器 orange</div>
<div class="box" id="app" style="color: aqua;">行内样式 aqua</div>
使用 !important
1
2
3
4
5
6
7
<style>
div {
color: aqua !important;
}
</style>
<div style="color: blue">aqua</div>
复合选择器叠加优先级
按 (行内样式，id选择器个数。类选择器个数，标签选择器个数) 从左到右依次比较个数，同一级个数多的优先级高，若相同则比较下一级
若有 !important 则优先级最高，继承的优先级最低
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
/* (0, 0, 2, 1) */
.c1 .c2 div {
color: blue;
}
/* (0, 1, 0, 1) */
div #box3 {
color: red;
}
/* (0, 1, 1, 0) */
#box1 .c3 {
color: aqua;
}
</style>
<div class="c1" id="box1">
<div class="c2" id="box2">
<div class="c3" id="box3">
aqua
</div>
</div>
</div>
例 2
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
27
28
<style>
/* (0, 2, 0, 0) */
#father #son {
color: aqua;
}
/* (0, 1, 1, 1) */
#father p.c2 {
color: black;
}
/* (0, 0, 2, 2) */
div.c1 p.c2 {
color: red;
}
/* 继承 */
#father {
color: blue !important;
}
/* 继承 */
div#father.c1{
color: yellow;
}
</style>
<div class="c1" id="father">
<div class="c2" id="son">
aqua
</div>
</div>
Emmet 写法
即代码的简写方式，输入缩写 VS Code 会自动生成对应的代码
对于 HTML
| 说明 | Emmet | 效果 |
|---|---|---|
| 类选择器 | 标签名.类名 |
<div class="box"></div> |
| id 选择器 | 标签名#id名 |
<div id="app"></div> |
| 同级标签 | div+p |
<div></div><p></p> |
| 父子级标签 | div>p |
<div><p></p></div> |
| 多个相同标签 | span*3 |
<span></span><span></span><span></span> |
| 有内容的标签 | div{内容} |
<div>内容</div> |
对于 CSS 多数为单词首字母
h500+w300+bgc 会变为
1
2
3
4
5
div {
width: 500px;
height: 300px;
background-color: #fff;
}