按次序选择子节点
父元素的第n个子节点
我们可以指定选择的元素 是父元素的第几个子节点
使用 nth-child
编辑
如果你不加节点类型限制,直接这样写 :nth-child(2)
就是选择所有位置为第2个的所有元素,不管是什么类型
父元素的倒数第n个子节点
也可以反过来, 选择的是父元素的 倒数第几个子节点 ,使用 :nth-last-child(n)
⭐️父元素的第几个某类型的子节点⭐️
我们可以指定选择的元素 是父元素的第几个 某类型的 子节点
使用 nth-of-type(n)
父元素的倒数第几个某类型的子节点
可以反过来, 选择父元素的 倒数第几个某类型 的子节点
使用 nth-last-of-type
像这样
p:nth-last-of-type(2)
奇数节点和偶数节点
如果要选择的是父元素的 偶数节点,使用 nth-child(even)
比如
p:nth-child(even)
如果要选择的是父元素的 奇数节点,使用 nth-child(odd)
p:nth-child(odd)
相邻兄弟节点选择
选择 h3 后面紧跟着的兄弟节点 span。
这就是一种 相邻兄弟 关系,可以这样写 h3 + span
后续所有兄弟节点选择
选择 h3 后面所有的兄弟节点 span,可以这样写 h3 ~ span