选择器
| 选择符 |
解析 |
| 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个 |
nth-child与nth-of-type公式
| 公式 |
取值 |
| 2n |
偶数 |
| 2n+1 |
奇数 |
| 5n |
5 10 15 |
| n+5 |
从第5个开始（包含第五个）到最后一个（此括号里面的数学可以自定义修改） |
| -n+5 |
前5个包含第五个（此括号里面的数学可以自定义修改） |
nth-child与nth-of-type区别
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>
