文章目录
刚开始学习前端，每天写一两个小模块
css层级选择器理论{#ek)
- E:first-child : 匹配的是E元素，E元素是父元素的第一个子元素
说明：利用 :first-child 这个伪类，只有当元素是另一个元素的第一个子元素时才能匹配。例如，p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素。一般可能认为这会选择作为段落第一个子元素的元素，但事实上并非如此，如果要选择段落的第一个子元素，应当写为 p > *:first-child。 - E:last-child : 匹配的是E元素，E元素是父元素的最后一个子元素
- E:nth-child(n): 匹配的是E元素，且E元素是父元素的正数第n个子元素
- E:nth-last-child(n): 匹配的是E元素，且E元素是父元素的倒数第n个子元素
- E:first-of-type: 匹配E元素，在所有的E元素中选择第一个子元素为E的元素
- E:last-of-type: 匹配E元素，在所有的E元素中选择倒数第一个子元素为E的元素
- E:nth-of-type(n): 匹配E元素，在所有的E元素中选择正数第n个子元素为E的元素
- E:nth-last-of-type(n): 匹配E元素，在所有的E元素中选择倒数第n个子元素为E的元素
nth中n的用法
- 数字
- odd： 奇数
- even: 偶数
- n+8: 8以后的
- -n+3: 前3个
代码展示
<!DOCTYPE html>
<html lang="en