- A+
本博文介绍CSS中的基础选择器和复合选择器。
基础选择器包括标签选择器、类选择器、id选择器和通配符选择器，复合选择器包括后代选择器、子选择器、并集选择器和伪类选择器。
1 基础选择器
基础选择器由单个选择器组成，包括：标签选择器、类选择器、id选择器和通配符选择器。
1.1 标签选择器
标签选择器通过单个元素标签（如p、div、h1）选择对应的元素，使用标签选择器会选择到所有的对应标签。
使用格式：
标签名{ 属性1: 属性值1; 属性2: 属性值2; }
使用实例：
div{ height: 100px; width: 100px; }
实例作用：将所有的 div 元素的高（height）和宽（width）设置为100px
1.2 类选择器
类选择器通过元素的类名（class）对元素进行选择，可以选择到一个或者多个元素标签，该选择器在开发中最常用。
使用格式：
.类名{ 属性1: 属性值1; 属性2: 属性值2; }
使用实例：
.red-box{ color: red; }
实例作用：将类名为"red-box"的元素中的字体颜色（color）设置为红色（red）
1.3 id选择器
id 选择器通过元素的 id 对元素进行选择，该选择器只能选择到一个元素标签（因为元素的 id 是唯一的），id 选择器经常和 js 搭配使用。
使用格式：
#id值{ 属性1: 属性值1; 属性2: 属性值2; }
使用实例：
#content_left{ text-align: left; }
实例作用：将 id 为"content_left"的元素中的文字内容设置左对齐（text-align: left;）
1.4 通配符选择器
通配符选择器可以选择页面中的所有元素，在去除掉页面中的默认样式时有很好的作用。
使用格式：
*{ 属性1: 属性值1; 属性2: 属性值2; }
使用实例：
*{ margin: 0; padding: 0; }
实例作用：将页面中所有元素的外边距（margin）和内边距（padding）都设置为0（此实例使用频率很高）
2 复合选择器
复合选择器由多个基础选择器组成，常用的包括：后代选择器、子选择器、并集选择器和伪类选择器。
2.1 后代选择器
后代选择器可以选择某个元素的所有后代元素（包括儿子元素、孙子元素等）。
使用格式：
元素1 元素2 元素3{ 样式 }
注意：
（1）元素和元素之间用空格隔开；
（2）元素1、元素2、元素3...为基础选择器（标签选择器、类选择器、id选择器等）。
使用实例：
div p{ color: red; }
实例作用：将所有 div 元素的所有子元素 p 中的字体颜色（color）设置为红色（red）
2.2 子选择器
子选择器可以选择某个元素的最近一级子元素（只包括儿子元素，不包括孙子元素等）。
使用格式：
元素1 > 元素2{ 样式 }
注意：
（1）元素和元素之间用 > 隔开；
（2）元素1、元素2...为基础选择器（标签选择器、类选择器、id选择器等）。
使用实例：
div > p{ color: red; }
实例作用：将所有 div 元素的所有儿子元素 p 中的字体颜色（color）设置为红色（red）
2.3 并集选择器
并集选择器可以选择多组元素并设置相同的样式。
使用格式：
元素1, 元素2{ 样式 }
注意：
（1）元素和元素之间用 , 隔开；
（2）元素1、元素2...为基础选择器（标签选择器、类选择器、id选择器等）。
使用实例：
.left-box, .right-box{ color: red; }
实例作用：将所有类名为"left-box"和"right-box"的元素中的字体颜色（color）设置为红色（red）
2.4 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，这里介绍链接伪类选择器和 focus伪类选择器。
使用格式：在选择器后用冒号表示，如 :hover、:active等。
- 链接伪类选择器
链接伪类选择器通过将元素选择器（a 元素）和伪类选择器复合，起到不同的效果，具体可以分为以下四种。
| 链接伪类选择器 | 选择元素 |
| a:link | 选择到所有未被访问的 a 元素 |
| a:visited | 选择到所有已被访问的 a 元素 |
| a:hover | 选择到鼠标指针位于其上的 a 元素 |
| a:active | 选择活动链接（鼠标按下未弹起的 a 元素） |
注意：为了确保链接伪类选择器生效，需按照link、visited、hover、active的顺序来写。
使用实例：
a:hover{ color: red; }
实例作用：当鼠标移到 a 元素上时，链接的文字颜色（color）变为红色（red）
- focus伪类选择器（:focus）
focus伪类选择器可以选取获得焦点（光标）的表单元素。
使用格式：
input:focus{ 样式 }
使用实例：
input:focus{ background-color: skyblue; }
实例作用：当光标聚焦在 input 元素上时，input 元素的背景颜色（background-color）变为天蓝色（skyblue）
