文章目录
- 1. ID 选择器
- 1.1. 语法
- 1.2. 完整写法
- 2. 类选择器
- 2.1. 语法
- 2.2. 完整写法
- 3. 元素选择器
- 4. 通配选择器
- 5. 基本选择器优先级
- 6. 基本选择器的总结
- 7. Google 案例
1. ID 选择器
以 # 开头，后面跟着 ID 名称，根据元素的 ID 名称选择元素，给元素加样式。和类选择器差不多，class 可以有多种，但是 id 只能有一种。
<p id="demo">Hello World</p>
1.1. 语法
#demo {color: red;
}
1.2. 完整写法
<!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>
2. 类选择器
以 . 开头，后面跟着类别名称。可以根据元素的类，进行加样式。这里我们给 p 标签加一个类，并给该类加一个样式。
<p class="demo">Hello World</p>
2.1. 语法
/* 选中所有class值为demo的元素 */
.demo {color: red;
}
2.2. 完整写法
<!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 属性值不用带 . 。
这种写法可以让我们准确地给某一个元素加样式，开发也是很常用。
3. 元素选择器
可以选择 HTML 元素，给元素加样式，比如这里可以给 h1 标签加样式，或者给 p 标签，div 标签，a 标签等等元素加样式。
h1 {/* 样式可以直接写在html中，这样可以控制整个页面的样式 *//* 设置宽度 */width: 50px;/* 设置高度 */height: 50px;/* 文字对齐 */text-align: center;
}
4. 通配选择器
符号是一个 * ，可以选择所有的元素，可以用来清除样式。
/* 选中所有元素 */
* {color: red;font-size: 40px;
}
5. 基本选择器优先级
行内样式 > ID 选择器 > 类选择器 > 元素选择器 > 通配选择器
结论：越是具体的优先级越高，越是通用模糊的优先级越低。
6. 基本选择器的总结
| 基本选择器 | 特点 |
|---|---|
| 通配选择器 | 选择所有的元素 |
| 元素选择器 | 选中同种标签的元素 |
| 类选择器 | 根据元素的类进行选择 |
| id 选择器 | 根据元素的id进行选择 |
7. 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>
