【Playwright 学习笔记 04】CSS定位方法

18 阅读1分钟

按次序选择子节点

父元素的第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