1.基本选择器

基本选择器包括：

通配选择器
元素选择器
类选择器
id 选择器

1.1 通配选择器

作用：可以选中所有的 HTML 元素
语法：

* {
	属性名:属性值;
}
* {
	color: greenyellow;
	font-size: 50px;
}

备注：目前看来通配选择器貌似有点鸡肋，但是后面清除样式时，会有很大帮助。

1.2 元素选择器

作用：为页面中的某种元素统一设置样式
语法：

标签名 {
	属性名:属性值;
}
h1 {
	color: black;
	font-size: 55px;
}

h2 {
	color: hotpink;
	font-size: 50px;
}

备注：元素选择器无法实现差异化设置样式。

1.3 类选择器

作用：根据元素的class值，来选中某些元素
语法：

.类名 {
	属性名: 属性值;
}
.tangPoetry{
	color: rgb(38, 103, 113);
	font-size: 40px;
}

.songCi{
	color: #1448a7;
	font-size: 40px;
}

注意： 1.元素的class属性值不带.，但是 CSS 的类选择器需要带.。 2.class的值，是自定义的，按照标准：不要使用纯数字，不要使用中文，尽量使用英文与数字的组合，若由多个单词组成，使用-做连接，且命名要有意义，做到”见名知意”。 3.一个元素不能写多个class属性，后面写的会失效 4.一个元素的class属性，能写多个值，要用空格隔开。如下所示

<!-- 错误写法 -->
<h1 class="test001" class="test002">hello world!</h1>
<!-- 正确写法 -->
<h1 class="test001 test002">hello world!</h1>

1.4 ID 选择器

作用：根据元素的id值，来选中某些元素
语法：

#ID {
	属性名: 属性值;
}
#tangPoetry{
	color: rgb(38, 103, 113);
	font-size: 50px;
}

#songCi{
	color: #1448a7;
	font-size: 50px;
}

1.5 基本选择器总结

基本选择器	特点	用法
通配选择器	选中所有标签，一般用于清除样式	`* {color:red}`
元素选择器	选中所有同种标签，但是不能差异化选中	`h1 {color:red}`
类选择器	选中所有特定类名(`class`值)的元素—-使用频率很高	`.say{color:red}`
ID 选择器	选中特定的`id`值的那个元素(唯一的)	`#say{color:red}`

2.复合选择器

2.1 交集选择器

作用：选中同时符合多个条件的元素
语法：选择器1选择器2选择器3....选择器n{}
举例

p.rich {
	color: yellowgreen;
}
p.beauty {
	color: purple;
}

注意

有标签名、标签名必须写在前面。
id 选择器，理论上可以作为交集的条件，但实际应用中几乎不用，没有意义。
交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是p元素又是span元素
用的最多的交集选择器是：元素选择器配合类名选择器，例如：p.beauty

2.2 并集选择器

作用：选中多个选择器对应的元素，又称为：分组选择器
语法：选择器1,选择器2,选择器3,...选择器n {}
举例:

.rich,
.beauty,
.dog,
.cat,
#jerry {
	font-size: 60px;
	background-color: black;
	width: 250px;
}

注意：

并集选择器中的各个选择器，一般竖着排版写
任何形式的选择器，都可以作为并集选择器的一部分
并集选择器，通常用于集体声明，可以缩小样式表体积

3.HTML 元素间的关系

父元素：直接包裹某个元素的元素，就是该元素的父元素。
子元素：被父元素直接包含的元素。
祖先元素：父元素的父元素，一直往外找，都是祖先，父元素也算是祖先元素的一种。
后代元素：子元素的子元素，一直往里找，都是后代，子元素也是后代元素的一种。
兄弟元素：具有相同父元素的元素，互为兄弟元素。

4.后代选择器

作用：选中指定元素中，复合要求的后代元素
语法：选择器1 选择器2 选择器3 .... 选择器n {}(先写祖先，再写后代)
选择器之间，用空格隔开。
选择器 1、2、3、4、…n，可以是之前的任何一种选择器
举例：

ul li{
	color: red;
}
ol li{
	color: green;
}
ul li a{
	color: orange;
}

注意：

后代选择器，最终选择的是后代，不选中祖先
儿子、孙子、重孙子，都算是后代
结构一定要复合之前讲的 HTML 嵌套要求，例如，不能在p标签中写h1~h6。

5.子代选择器

作用：选中指定元素中，符合要求的子元素。（先写父，再写子）
子代选择器又称：子元素选择器、子选择器
语法：选择器1 > 选择器2 > 选择器3 .... 选择器n {}
选择器之间，用>隔开
选择器 1234….n，可以是我们之前学的任何一种选择器
举例：

div > a{
	color: red;
}

div > p > a{
	color: pink;
}

.end > a{
	color: skyblue;
}

注意

子代选择器，最终选择的是子代，不是父级。
子、孙子、重孙子等等统称后代！子就是指的儿子。

6.兄弟选择器

6.1 相邻兄弟选择器

作用：选中指定元素后，符合条件的相邻兄弟元素
所谓相邻，就是紧紧挨着这个元素的下一个元素
语法：选择器1+选择2 {}
示例：

/* 选中div后紧紧相邻的兄弟p元素 */
div + p {
	color: red;
}

6.2 通用兄弟选择器

作用：选中指定元素后，复合条件的所有兄弟元素。
语法：选择器1~选择器2 {}
示例：

/* 选中div后所有兄弟p元素 */
div ~ p {
	color: red;
}

注意：两种兄弟选择器，选择的都是下面的兄弟。

7.属性选择器

作用：选中属性值复合一定要求的元素
语法：

[属性名]：选中具有某个属性的元素
[属性名="值"]：选中包含某个属性，且属性值等于指定值的元素
[属性名^="值"]：选中包含某个属性，且属性值以指定值开头的元素
[属性名$="值"]：选中包含某个属性，且属性值以指定值结尾的元素
[属性名*="值"]：选中包含某个属性，且属性值包含指定值的元素

举例

/* 第一种写法：选中具有title属性的元素 */
[title] {
	color: red;
}

/* 第二种写法：选中具有title属性，且属性值为alone的元素 */
[title="alone"] {
	color: skyblue;
}

/* 第三种写法：选中具有title属性，且属性值以字母a开头的元素 */
[title^="g"] {
	color: brown;
}

/* 第四种写法：选中具有title属性，且属性值以字母s结尾的元素 */
[title$="s"] {
	color: pink;
}

/* 第五种写法：选中具有title属性，且属性值包含字母h的元素 */
[title*="h"] {
	color: greenyellow;
}

8.伪类选择器

8.1 伪类选择器概念

定义：很像类，但不是类，是元素特殊状态的一种描述
作用：选中特殊状态的元素

8.2 动态伪类

:link：超链接未被访问的状态
:visited：超链接访问过的状态
:hover：鼠标悬停在元素上的状态
:active：元素激活的状态
什么是激活？
按下鼠标不松开
注意点：样式表表中书写遵循LVHA的顺序，即：link、visited、hover、active
:focus：获取焦点的元素
表单类元素才能使用:focus伪类
当用户：点击元素、触摸元素，或通过键盘的tab键等方式，选择元素时，就是获得焦点

8.3 结构伪类

8.3.1 结构伪类定义

知道了结构才能去找到对应元素

8.3.2 常用的结构伪类

:first-child: 所有兄弟元素中的第一个
p:last-child: 所有兄弟元素中的最后一个
:nth-child(n): 所有兄弟元素中的第 n 个
:first-of-type: 所有同类型兄弟元素中的第一个
last-of-type:所有同类型兄弟元素中的最后一个
nth-of-type(n):所有同类型兄弟元素中的第 n 个

关于 n 的值：
1. 0 或者不写：什么都不选中 —- 几乎不用
2. n：选中所有子元素 —- 几乎不用
3. 1 ~ 正无穷的整数：选中对应序号的子元素
4. 2n 或者 even : 选中序号为偶数的子元素
5. 2n +1 或者 odd ：选中序号为奇数的子元素
6. -n + 5: 选中前三个子元素

8.3.3 不常用的结构伪类

:nth-last-child(n): 所有兄弟元素中的倒数第 n 个
:nth-last-of-type(n):所有同类型兄弟元素中的倒数第 n 个
:only-child:选择没有兄弟的元素
:only-of-type:选择没有同类型兄弟的元素
:root:根元素
:empty:内容为空的元素（空格也算内容）

8.4 否定伪类

作用：排除满足括号中选择器条件的元素，括号中元素可以写其他选择器
格式：:not(选择器)
示例：

/* 选中的是div的儿子p元素，但是排除类名为fail的元素 */
div>p:not(.fail){
	color: red;
}

/* 选中的是div的儿子p元素，但是排除title属性值"需要加油"开头的元素 */
div>p:not([title^="需要加油"]){
	color: blanchedalmond;
}

/* 选中的是div的儿子p元素，但是排除第一个儿子p元素 */
div>p:not(:first-child){
	font-size: 45px;
}