一、id选择器
id选择器可以为标有特定的id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器，CSS中id选择器以**"#"来定义**。
1. 使用方式
1.1 语法
#id名 {
属性1: 属性值1;
···
}
如：将id为nav元素中的内容设置为红色
#nav {
color: red;
}
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id选择器</title>
<style>
/* id选择器的口诀:样式#定义,结构id调用，只能调用一次，别人切勿使用 */
#pink {
color: pink;
}
</style>
</head>
<body>
<div id="pink">夏洛克·福尔摩斯</div>
<div>柯南·道尔</div>
</body>
</html>
1.2 id选择器和类选择器的区别
1.类选择器（class）就如同人的名字，一个人可以有多个名字，同时一个名字可以被多个人使用。
2.id选择器就像人的身份证号码，是唯一的，不得重复。
3.id选择器和类选择器最大的不同在于使用次数上。
4.类选择器在修改样式中用的最多，id选择器一般用于唯一性的元素上，经常和JavaScript搭配使用。
1.3 总结
id选择器的口诀:样式#定义,结构id调用，只能调用一次，别人切勿使用。
二、通配符选择器
在CSS中，通配符选择器使用"*"定义，它表示选取页面中的所有元素（标签）。
1. 使用方式
1.1 语法
* {
属性1: 属性值1;
···
}
- 通配符选择器不需要调用，自动给所有的元素使用样式；
- 特殊情况才使用，如清除所有元素标签的内外边距，后面涉及的时候详细描述。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符选择器</title>
<style>
/* * 把这里的html body div span li p h2等标签都改为了红色 */
* {
color: red;
}
</style>
</head>
<body>
<div>天空</div>
<span>大海</span>
<ul>
<li>星辰</li>
</ul>
<p>高山</p>
<h2>流水</h2>
</body>
</html>
三、基础选择器总结
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签 | 不能差异化选择 | 较多 | p { color: red; } |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
| id选择器 | 一次只能选择1个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和js搭配 | #nav { color: red; } |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 特殊情况使用 | * { color: red; } |
- 每个基础选择器都有使用场景，都需要掌握；
- 如果是修改样式，类选择器是使用最多的。