![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：总结的很好,看得出用心了 ,继续加油
Collection
Collection
| 选择符 | 解析 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素 E |
| E:first-child | 匹配父元素中最后一个E元素 |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15 |
| n+5 | 从第5个开始（包含第五个）到最后一个（此括号里面的数学可以自定义修改） |
| -n+5 | 前5个包含第五个（此括号里面的数学可以自定义修改） |
nth-child 对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配，若不匹配则不使用nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E . 然后再根据E找第n个孩子
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Title</title><style>/*权重为0 0 1*/h1{color: yellow;}/*此时h1标签显示为黄色*//*权重为0 1 1*/h1.title{color:red;}/*此时h1标签内容显示为红色*//*权重为1 0 0*/h1.title#title{color: blue;}/*此时h1标签内容显示为蓝色*//* 提升权重 *//* 权重为 1 1 2 */body > h1.title#title{color: pink;}/*此时h1标签内容显示为粉色*//* 伪类使用方法 */.list>.item:first-of-type{color: red;}/*使ul下面的第一个li标签内容显示为红色*/.list>.item:last-of-type{color: red;}/*使ul下面的最后一个li标签内容显示为红色*/.list>.item:nth-of-type(n+3){color: blue;}/*使ul下面的从第三个标签开始后面的li标签的内容变为蓝色*/.list>.item:nth-of-type(-n+3){color: pink;}/*使ul下面的从第三个标签开始前面的li标签的内容变为蓝色*/</style></head><body><h1 class="title" id="title">权重权重权重</h1><ul class="list"><li class="item">内容</li><li class="item">内容</li><li class="item">内容</li><li class="item">内容</li><li class="item">内容</li><li class="item">内容</li><li class="item">内容</li><li class="item">内容</li></ul></body></html>
