ID选择器
以 # 开头，后面跟着 ID 名称，根据元素的ID 名称选择元素，给元素加样式。和类选择器差不多，class可以有多种，但是id只能有一种。
<p id="demo">Hello World</p>
语法
#demo {
color: red;
}
完整写法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS选择器</title>
<style>
#demo {
color: red;
}
</style>
</head>
<body>
<p id="demo">Hello World</p>
</body>
</html>
类选择器
以 . 开头，后面跟着类别名称。可以根据元素的类，进行加样式。这里我们给p标签加一个类，并给该类加一个样式。
<p class="demo">Hello World</p>
语法
/* 选中所有class值为demo的元素 */
.demo {
color: red;
}
完整写法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS选择器</title>
<style>
.demo {
color: red;
}
</style>
</head>
<body>
<p class="demo">Hello World</p>
</body>
</html>
这种类选择器要带 . ，而元素的class属性值不用带 . 。
这种写法可以让我们准确地给某一个元素加样式，开发也是很常用。
元素选择器
可以选择HTML元素，给元素加样式，比如这里可以给h1标签加样式，或者给p标签，div标签，a标签等等元素加样式。
h1 {
/* 样式可以直接写在html中，这样可以控制整个页面的样式 */
/* 设置宽度 */
width: 50px;
/* 设置高度 */
height: 50px;
/* 文字对齐 */
text-align: center;
}
通配选择器
符号是一个 ***** ，可以选择所有的元素，可以用来清除样式。
/* 选中所有元素 */
* {
color: red;
font-size: 40px;
}
基本选择器优先级
行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器
结论：越是具体的优先级越高，越是通用模糊的优先级越低。
基本选择器的总结
| 基本选择器 | 特点 |
|---|---|
| 通配选择器 | 选择所有的元素 |
| 元素选择器 | 选中同种标签的元素 |
| 类选择器 | 根据元素的类进行选择 |
| id选择器 | 根据元素的id进行选择 |
Google案例
用基本选择器改进Google案例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>04-CSS基本选择器-Google案例</title>
<style>
/* 设置颜色 */
.c1 {
color: blue;
}
.c2 {
color: red;
}
.c3 {
color: yellow;
}
.c4 {
color: green;
}
/* 设置字体 */
span {
font-size: 50px;
}
</style>
</head>
<body>
<span class="c1">G</span>
<span class="c2">o</span>
<span class="c3">o</span>
<span class="c1">g</span>
<span class="c4">l</span>
<span class="c2">e</span>
</body>
</html>