![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：unqualified
Teacher's comments：你忘了写代码了
Collection
Collection
分为两大类：元素选择器、属性选择器
| 序号 | 选择器 | 描述 | 举例 |
|---|---|---|---|
| 1 | 元素选择器 | 根据元素标签名称进行匹配 | 元素 {...} |
| 2 | 群组选择器 | 同时选择多个不同类型的元素 | 元素1,元素2,元素3{...} |
| 3 | 通配选择器 | 选择全部元素,不区分类型 | * {...} |
| 4 | 属性选择器 | 根据元素属性进行匹配 | *[property=value]{...} |
| 5 | 类选择器 | 根据元素 class 属性进行匹配 | *.class {...} |
| 6 | id 选择器 | 根据元素 id 属性进行匹配 | *#id {...} |
| 序号 | 角色 | 描述 |
|---|---|---|
| 1 | 祖先元素 | 拥有子元素,孙元素等所有层级的后代元素 |
| 2 | 父级元素 | 仅拥有子元素层级的元素 |
| 3 | 后代元素 | 与其它层级元素一起拥有共同祖先元素 |
| 4 | 子元素 | 与其它同级元素一起拥有共同父级元素 |
| 序号 | 选择器 | 操作符 | 描述 | 举例 |
|---|---|---|---|---|
| 1 | 后代选择器 | 空格 |
选择当前元素的所有后代元素 | div p, body * |
| 2 | 父子选择器 | > |
选择当前元素的所有子元素 | div > h2 |
| 3 | 同级相邻选择器 | + |
选择拥有共同父级且相邻的元素 | li.red + li |
| 4 | 同级所有选择器 | ~ |
选择拥有共同父级的后续所有元素 | li.red ~ li |
按使用场景分类：
| 场景 | 描述 |
|---|---|
| 结构伪类 | 根据子元素的位置特征进行选择 |
| 表单伪类 | 根据表单控件状态特征进行选择 |
| 序号 | 选择器 | 描述 | 举例 |
|---|---|---|---|
| 1 | :first-child |
匹配第一个子元素 | div :first-child |
| 2 | :last-child |
匹配最后一个子元素 | div :last-child |
| 3 | :only-child |
选择元素的唯一子元素 | div :only-child |
| 4 | :nth-child(n) |
匹配任意位置的子元素 | div :nth-child(n) |
| 5 | :nth-last-child(n) |
匹配倒数任意位置的子元素 | div :nth-last-child(n) |
| 序号 | 选择器 | 描述 | 举例 |
|---|---|---|---|
| 1 | :first-of-type |
匹配按类型分组后的第一个子元素 | div :first-of-type |
| 2 | :last-of-type |
匹配按类型分组后的最后一个子元素 | div :last-of-type |
| 3 | :only-of-type |
匹配按类型分组后的唯一子元素 | div :only-of-type |
| 4 | :nth-of-type() |
匹配按类型分组后的任意位置的子元素 | div :nth-of-type(n) |
| 5 | :nth-last-of-type() |
匹配按类型分组后倒数任意位置的子元素 | div :nth-last-of-type(n) |
| 序号 | 选择器 | 描述 |
|---|---|---|
| 1 | :active |
向被激活的元素添加样式 |
| 2 | :focus |
向拥有键盘输入焦点的元素添加样式 |
| 3 | :hover |
当鼠标悬浮在元素上方时，向元素添加样式 |
| 4 | :link |
向未被访问的链接添加样式 |
| 5 | :visited |
向已被访问的链接添加样式 |
| 5 | :root |
根元素,通常是html |
| 5 | :empty |
选择没有任何子元素的元素(含文本节点) |
| 5 | :not() |
排除与选择器参数匹配的元素 |
总结：
- 最常用：类、id、属性选择器，当使用属性类选择器时，可省略“*”，“*”表示选择文档中所有元素中符合该属性的元素。
- 使用类选择器使用时，可以对一个元素添加多个类名，类名之间用空格分开：
class="clz1 clz2"，选择器为：.clz1.clz2- 众多的元素组成HTML文档，从根元素
<html>开始，其他都是<html>的子元素，<html>为父元素。
子元素<head>和<body>再嵌套子元素，<html>就是祖先元素，嵌套的元素就是后代元素。- 后代元素：包含子元素、间接子元素（孙元素）,后代选择器 选择了所有符合条件的子元素和间接子元素
- 把同级元素按先后顺序排列，排在前的是哥哥，排在后的是弟弟：同级相邻选择器 选择的就是最大的弟弟,这里选择的结果并不一定只有一个元素，当“+”前面的选择器是代表多个元素的时候，可能有多个结果；同级所有选择器 选择的就是所有的弟弟
6.伪类选择器-不分组匹配：匹配方式是按索引方式匹配当前元素（“：”前面的匹配结果集）的子元素；但“only-child不是：selector：only-child表示先匹配“selector”后的元素，再找这些元素是否是其父元素的唯一的子元素，是就能匹配上
伪类选择器-分组匹配:selector：nth-of-type(n)将匹配“selector”后的结果集（排除其他所有类型），从索引1开始计算后的“n”个元素就是匹配结果，