CSS的选择器

目录

一、基本选择器

二、复合选择器（2种）

三、关系选择器（4种）

四、属性选择器（5种）

五、伪类选择器（11种）

六、伪元素选择器（5种）一般用在段落标记中

---

6种选择器：基本选择器、复合选择器、关系选择器、属性选择器、伪类选择器、伪元素选择器

一、基本选择器

1.标签选择器：所有该标签都会被设置样式

2.类选择器：标签设置类属性（class=“名字”）名字由数字字母下划线中划线组成，用.类名调用

3.id选择器：标签设置id值（id="名字“）用#名字调用 名字不以数字开头

4.通配符选择器：*{} 所有的标签设置样式

class和id的区别

一个标签中可以有多个类名，类名可以重复，一个选择器可以选择多个标签中间用逗号隔开；id一个标签中只能有一个ID属性值，且名字不可以重复，一个选择器只能选中一个标签

二、复合选择器（2种）

1.交集选择器

同时满足，标签选择器永远在最前面，选择器之间紧挨着。

2.并集选择器

同时选择多组标签设置样式，选择器之间用”,“隔开。

三、关系选择器（4种）

1.父亲 > 儿子 儿子中个别选择（大于号）

2. 祖先 后代 后代全部选择 （空格）

3.兄+弟 离哥最近的弟被选择（+）

4.兄~弟 哥的所有弟都被选择 （~）

四、属性选择器（5种）

[属性] ：含有指定属性

[属性=属性值] ： 指定属性和属性值

[属性^=属性值]： 指定属性且以该属性值开头的

[属性$=属性值]：指定属性且以该属性值结尾的

{属性*=属性值] ：指定属性且含有该属性值的

五、伪类选择器（11种）

1.元素选择伪类选择器（6种）

first-child  last-child 前有空格代表从子类开始也就是关系（祖先 后代）选择器（后代都要选），无空格代表从所在级数开始。

1.1.1有空格  :first-child 第一个子元素  eg: div :first-child 所有div的第一个子元素

1.1.2 没有空格  :first-child 第一个子元素  eg: div :first-child div的第一个子元素 

1.2.1 没有空格 :last-child 第一个元素的最后一个子元素

1.2.2  有空格 :last-child 所有元素的最后一个子元素

1.3  :nth-child(n) 选中第n个元素, n的范围0到正无穷

                                                      n可以为even 或 2n表示偶数位

                                                       odd  或者 2n+1 表示奇数位

1.3.1 有空格  :nth-child(n)   每一个层级的选中的元素的子元素位置

1.3.2 没有空格 :nth-child(n)  从当前层级开始

1.3.3  有空格:nth-child(2n) 每一个层级的选中的元素的偶数位

1.3.4 没有空格  :nth(2n)  当前层级的偶数位

1.3.5  有空格 :nth(2n+1) 每一个层级的选中的元素的j奇数位

1.3.6  没有空格 :nth(2n+1) 当前层级的奇数位

1.4 同类型的元素中进行选择

1.4  :first-of-type   是所有层级的第一个元素

1.5  :last-of-type 所有层级的最后一个

1.6:nth-of-type(n) 所有层级的第n 个

2.否定伪类选择器（1种）

:not()  括号里的选择器不被选择且括号里不支持复合选择器的传入

3.a链接的伪类选择器（4种）

:link  未访问过的a标签

:visited  访问过的a标签

link 和visited是超链接特有的

:hover  鼠标移入的元素状态

:active  鼠标点击后元素的状态

六、伪元素选择器（5种）一般用在段落标记中

1. p::first-letter     首字符 块级元素
2. p::first-line       首行  块级元素
3. p::selection        选中的
4. ::before            第一个字符之前  配合contend一起使用
5. ::after             最后一个字符之后 配合contend一起使用