| 首先来说一下，什么是选择器。在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了。 选择器为样式规则指定一个作用范围。 |
|
| ##### 1）基础选择器包括 |
|
| - 标签选择器 |
| - 类选择器 |
| - ID选择器 |
| - 通用选择器 |
|
| #### 二，ID选择器 |
|
| 通过元素的ID值选择元素： |
|
| 示例： |
|
| ```css |
| /将id值为i1的元素字体颜色设置为红色。/ |
| #i1 { |
| color: red; |
| } |
| ``` |
|
| #### 三，通用选择器 |
|
使用*选择所有元素： |
|
| ```css |
| * { |
| color: black; |
| } |
| ``` |
|
| #### 四，高级选择器 |
|
|
|
|
|
|
|
|
|
| #### 五，后代选择器 |
|
| 因为HTML元素可以嵌套，所以我们可以从某个元素的后代查找特定元素，并设置样式： |
|
| ```CSS |
| /从div的所有后代中找p标签，设置字体颜色为红色。/ |
| div p{ |
| color: red; |
| } |
| ``` |
|
| #### 六，儿子选择器 |
|
| ```css |
| /从div的直接子元素中找到p标签，设置字体颜色为红色。/ |
| div>p { |
| color: red; |
| } |
| ``` |
|
| #### 七，毗邻选择器 |
|
| ```css |
| /找到所有紧挨在div后面的第一个p标签，设置字体颜色为红色。/ |
| div+p{ |
| color: red; |
| } |
| ``` |
|
| #### 八，弟弟选择器 |
|
| ```css |
| /找到所有div标签后面同级的p标签，设置字体颜色为红色。/ |
| div~p{ |
| color: red; |
| } |
| ``` |