【Playwright 学习笔记 03】CSS选择器 定位方法

选择 子元素 和 后代元素

HTML中, 元素 内部可以 包含其他元素, 比如 下面的 HTML片段

python 复制代码
<div id='container'>
    <div id='layer1'>
        <div id='inner11'>
            <span>内层11</span>
        </div>
        <div id='inner12'>
            <span>内层12</span>
        </div>
    </div>

    <div id='layer2'>
        <div id='inner21'>
            <span>内层21</span>
        </div>
    </div>
</div>

id 为 layer1layer2 的两个div元素 是 id 为 container 的div元素 的 直接子元素

对于 id 为 container 的div元素来说, id 为 inner11inner12inner22 的元素 和 两个 span类型的元素 都不是 它的直接子元素, 因为中间隔了 几层。

虽然不是直接子元素, 但是 它们还是在 container 的内部, 可以称之为它 的 后代元素

────────────────────────────────────────────────────────────

选择方法

如果 元素2元素1直接子元素, CSS Selector 选择子元素的语法是这样的

php 复制代码
元素1 > 元素2

更多层级的选择, 比如

php 复制代码
元素1 > 元素2 > 元素3 > 元素4

++最终选择元素4++

────────────────────────────────────────────────────────────

如果 元素2元素1后代元素, CSS Selector 选择后代元素的语法是这样的

php 复制代码
元素1   元素2

更多层级的选择, 比如

objectivec 复制代码
元素1   元素2   元素3  元素4

++中间是一个或者多个空格隔开++

────────────────────────────────────────────────────────────

根据属性选择

(除了id、class其他属性的选择方法)

css 选择器支持通过任何属性来选择元素,语法是用一个方括号 []

python 复制代码
<a href="http://www.miitbeian.gov.cn">苏ICP备88885574号</a>

比如要选择上面的a元素,就可以使用 [href="http://www.miitbeian.gov.cn"]

前面也可以加上标签名的限制,比如**a****[href="http://www.miitbeian.gov.cn"]表示 选择所有 标签名为 a ,且 属性 href值为http://www.miitbeian.gov.cn** 的元素

CSS 还可以选择 属性值 **包含**某个字符串 的元素

比如, 要选择a节点,里面的href属性包含了 miitbeian 字符串,就可以这样写

python 复制代码
a[href*="miitbeian"]

还可以 选择 属性值 以某个字符串 开头 的元素

比如, 要选择a节点,里面的href属性以 http 开头 ,就可以这样写

python 复制代码
a[href^="http"]

还可以 选择 属性值 以某个字符串 结尾 的元素

比如, 要选择a节点,里面的href属性以 gov.cn 结尾 ,就可以这样写

python 复制代码
a[href$="gov.cn"]

如果一个元素具有多个属性

python 复制代码
<div class="misc" ctype="gun">沙漠之鹰</div>

CSS 选择器 可以指定 选择的元素要 同时具有多个属性的限制,像这样 div[class=misc][ctype=gun]

────────────────────────────────────────────────────────────

选择语法联合使用

比如, 我们要选择 如下网页中 html 中的元素 版权1 对应的 span

python 复制代码
<div id='bottom'>
    <div class='footer1'>
        <span class='copyright' name='cp1'>版权1</span>
        <span class='copyright' name='cp2'>版权2</span>
        <span class='copyright1' name='cp1'>版权3</span>
    </div>
    <div class='footer2'>
        <span class='copyright' name='cp1'>版权4</span>
    </div>        
</div>

CSS selector 表达式 可以这样写:

python 复制代码
.footer1 > .copyright[name=cp1]

────────────────────────────────────────────────────────────

组选择

如果我们要 同时选择所有classplant class 为 animal 的元素。怎么办?

这种情况,css选择器可以 使用 逗号 ,称之为 组选择 ,像这样

python 复制代码
.plant , .animal

我们要选择所有 唐诗里面的作者和诗名, 也就是选择所有 id 为 t1 里面的 spanp元素

我们是不是应该这样写呢?

python 复制代码
#t1 > span,p

不行哦,这样写的意思是 选择所有 idt1里面的span所有的 p 元素

只能这样写

复制代码
#t1 > span , #t1 > p
相关推荐
xinhuanjieyi14 分钟前
极语言让ai学习的方法
开发语言·学习
云原生指北30 分钟前
你的数据正在喂养 AI:从 Atlassian 公告,看科技平台的数据训练默认政策
笔记
念恒1230638 分钟前
Python(复杂判断)
python·学习
happymaker062639 分钟前
MyBatis学习日记——DAY03(手写MyBatis框架实现简单功能)
学习
山楂树の1 小时前
原生 WebGL + Canvas 实现鱼眼图像去畸变(Shader逐像素计算)
图像处理·数码相机·学习·程序人生
**蓝桉**1 小时前
容器服务学习笔记
笔记·学习
乔代码嘚1 小时前
Agentic-KGR:多智能体强化学习驱动的知识图谱本体渐进式扩展技术
人工智能·学习·大模型·知识图谱·ai大模型·大模型学习·大模型教程
zhangrelay2 小时前
三分钟云课实践速通--模拟电子技术-模电--SimulIDE
linux·笔记·学习·ubuntu·lubuntu
木木_王2 小时前
嵌入式Linux学习 | 数据结构 (Day05) 栈与队列详解(原理 + C 语言实现 + 实战实验 + 易错点剖析)
linux·c语言·开发语言·数据结构·笔记·学习
lkforce2 小时前
MiniMind学习笔记(三)--train_pretrain.py(预训练)
笔记·机器学习·ai·预训练·minimind·train_pretrain