结构伪类选择器

<ul id="one">
    <li>我是第1个</li>
    <li>我是第2个</li>
    <li>我是第3个</li>
    <li>我是第4个</li>
    <li>我是第5个</li>
  </ul>
  <style>
  	ul li:first-child{
    color: red;
	}
	ul li:last-child{
    color: blue;
	}
	ul li:nth-child(4){
    color: blueviolet;
	}
  </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

first-child表示第一个

last表示最后一个

# nth-child()

这个比较特殊，括号里可以是数字，关键字，公式

# 数字

表示是第几个

# 关键字

ul li:nth-child(odd){
    /* odd表示奇数 */
    color: red;
    font-size: large;
}
ul li:nth-child(even){
    /* even表示偶数 */
    color: green;
    font-size: large;
}

1
2
3
4
5
6
7
8
9
10

效果

# 公式

nth-child(n),这里只能写n，从0开始计算，比如0-100

比如2n，就是0,2,4,6,8,10···所以你写2n就是偶数

所以懂了吧

-n+5 就是前5个，自己发挥吧

# 使用规则

先读取nth-child(odd)，然后再读取前面的标签，如果不符合，那没办法显示

# nth-of-type

和nth-child区别，是它执行的时候是先找标签，在找后面的孩子，这个就算在混搭的标签中，也可以精准的找到对应的标签

当然他也有fitst-of-type last-of-type

编辑

上次更新: 2021/08/13, 23:21:49

← HTML Worker 伪元素选择器→