CSS 引入方式
CSS 有三种引入方式，第一种为内部样式表，此方式仅学习使用
1
2
3
4
5
6
7
8
9
10
<html>
<head>
<title></title>
<style>
/* 此处写 CSS */
</style>
</head>
<body>
</body>
</html>
第二种为行内样式，一般配合 JavaScript 使用
1
<div style="此处写 CSS"></div>
最后一种为外部样式表，将 CSS 代码写在单独文件，通过 link 标签引入，开发时常用
1
2
3
4
<head>
<title></title>
<link rel="stylesheet" href="css path" />
</head>
CSS 选择器
选择器的作用是查找标签，设置样式，一共四种基础选择器
标签选择器
直接使用标签名作为选择器，即选中同名标签设置相同的样式
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<title></title>
<style>
div{
/* 选中所以 div 标签设置样式 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
可以使用的标签有 p、h1、div、a、img 等
类选择器
用于查找标签，差异化设置标签的显示效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<title></title>
<style>
.first{
/* 选中 first div 设置样式 */
}
</style>
</head>
<body>
<div class="first">
first div
</div>
<div>
second div
</div>
</body>
</html>
类名若是多个单词可用 - 连接，一个类选择器可用供多个标签使用，一个标签可以使用多个类名
1
2
3
<div class="first second">
使用了两个类名
</div>
id 选择器
用于查找标签，差异化设置标签的显示效果，一般配合 JavaScript 使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<title></title>
<style>
#app{
/* 选中 id 为 app 的标签 */
}
</style>
</head>
<body>
<div id="app"></div>
<div></div>
</body>
</html>
同一个 id 选择器在一个页面只能使用一次
通配符选择器
查找页面所有标签，设置相同样式，一般用于清除标签的默认样式
1
2
3
4
5
<style>
*{
/* 书写样式影响所有标签 */
}
</style>
复合选择器
定义：由两个或多个基础选择器，通过不同的方式组合而成
作用：更准确、更高效的选择目标元素 (标签)
后代选择器
可以选中某元素的所有后代元素
语法：父选择器 子选择器 { CSS 属性 }
父选择器与子选择器之间用空格隔开，可以为类选择器或 id 选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
div span{
color: aqua;
}
</style>
<span>颜色不会变</span>
<div>
<span>颜色会变</span>
<p>
<span>颜色会变</span>
</p>
</div>
子代选择器
只选中某元素子级元素
语法：父选择器 > 子选择器 { CSS 属性 }
1
2
3
4
5
6
7
8
9
10
11
12
<style>
div > span{
color: aqua;
}
</style>
<div>
<span>颜色会变</span>
<p>
<span>颜色不会变</span>
</p>
</div>
并集选择器
选中多组标签设置相同的样式
语法：选择器1, 选择器2, ..., 选择器N { CSS 属性 }
1
2
3
4
5
6
7
8
9
<style>
div, span, p {
color: aqua;
}
</style>
<div>颜色会变</div>
<p>颜色会变</p>
<span>颜色会变</span>
交集选择器
选中同时满足多个条件的元素
语法：选择器1选择器2 { CSS 属性 } 选择器之间连写，没有任何符号
如果交集选择器中有标签选择器，标签选择器必须书写在最前面
1
2
3
4
5
6
7
8
9
<style>
p.box {
color: aqua;
}
</style>
<p class="box">颜色会变</p>
<p>p 标签，颜色不会变</p>
<div class="box">颜色不会变</div>
伪类选择器
伪类表示元素状态，选中元素的某个状态设置样式
鼠标悬停状态
语法：选择器:hover { CSS 属性 }
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
a:hover{
color: red;
}
.box:hover{
color: aqua;
}
</style>
<a href="https://yexca.net">yexca</a>
<div class="box">
div 标签
</div>
任何标签都可以设置鼠标悬停的状态
超链接的状态
| 选择器 | 作用 |
|---|---|
| :link | 访问前 |
| :visited | 访问后 |
| :hover | 鼠标悬停 |
| :active | 点击时 (激活) |
若给超链接设置四个状态，需按顺序书写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
a:link {
color: green;
}
a:visited {
color: red;
}
a: hover {
color: aqua;
}
a: active {
color: orange;
}
</style>
<a href="#">a 标签</a>
结构伪类选择器
作用：根据元素的结构关系查找元素
| 选择器 | 说明 |
|---|---|
| E:first-child | 选择第一个 E 元素 |
| E:last-child | 选择最后一个 E 元素 |
| E:nth-child(N) | 选择第 N 个 E 元素 (从 1 开始) |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
li:first-child {
background-color: aqua;
}
li:last-child {
background-color: green;
}
li:nth-child(3) {
background-color: blue;
}
</style>
<ol>
<li>aqua</li>
<li>2</li>
<li>blue</li>
<li>4</li>
<li>green</li>
</ol>
其中第三个选择器可以使用公式选择多个元素
| 功能 | 公式 |
|---|---|
| 偶数个标签 | 2n |
| 奇数个标签 | 2n+1 或 2n-1 |
| 找到 5 的倍数的标签 | 5n |
| 找到第 5 个以后的标签 (包括 5) | n+5 |
| 找到第 5 个以前的标签 (包括 5) | -n+5 |
伪元素选择器
作用：创建虚拟元素 (伪元素)，用来摆放装饰性的内容
| 选择器 | 说明 |
|---|---|
| E::before | 在 E 元素里面最前面添加一个伪元素 |
| E::after | 在 E 元素里面最后面添加一个伪元素 |
注意：
- 必须设置 content 属性，用来设置伪元素的内容，如果没有内容，则引号留空
- 伪元素默认为行内显示模式
- 优先级和标签选择器相同
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
div {
width: 110px;
height: 30px;
background-color: aqua;
font-size: 20px;
}
div::before {
content: 'yexca';
}
div::after {
content: 'blog';
}
</style>
<div>'</div>
<!-- 内容为 yexca'blog -->