选择器

1.选择器是什么？

• 选择器就是选择元素的方式
• 选择元素方式的多样化造成选择器的多样化

选择器的分类

一、全局选择器：

*通配符：用于选择所有元素

二、基础选择器

1. 元素选择器：选择所有标签
2. id选择器：选择一个标签
3. class选择器：选择一组标签

三、属性选择器

通过标签的属性匹配元素

所有的属性选择器都以方括号括起来

[attr]

表示带有以 attr 命名的属性的元素。

[attr=value]

表示带有以 attr 命名的属性，且属性值为 value 的元素。

[attr~=value]

表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

[attr|=value]

表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。

[attr^=value]

表示带有以 attr 命名的属性，且属性值是以 *value *开头的元素。

[attr$=value]

表示带有以 attr 命名的属性，且属性值是以 *value *结尾的元素。

[attr*=value]

表示带有以 attr 命名的属性，且属性值至少包含一个 *value *值的元素。

[attr operator value i]

在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。

[attr operator value s] 实验性

在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。

四、伪类选择器

伪类选择器的标志是 单冒号 :

1. :link
2. :active
3. :hover
4. :visited
5. :focus匹配焦点元素（部分元素有焦点：表单元素，超链接）
6. :nth-chird()匹配第几个元素
7. :first-chird()匹配第一个元素
8. :last-chird()匹配最后一个元素
9. :root匹配根元素
10. :not()匹配不是某个元素的元素
11. :checked检查选中只能设置给单选复选

五、伪元素选择器

1. ::first-letter选中文本的第一个字母
2. ::after
3. ::before
4. ::first-line选中文本的第一个行

六、组合选择器

组合选择器就是把上面这五类组合在一起使用

1. 分组选择器 ,：使用 ,组合
2. 后代选择器：使用空格组合
3. 子元素选择器：使用>组合
4. 相邻兄弟选择器：使用+组合