以该网址为例(https://learn.letskodeit.com/p/practice)

一、通过子节点定位元素

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

1、例如我们需要定位这个table表格

章节十、6-CSS---用CSS 定位子节点 随笔 第1张

2、当我们通过table标签直接定位时,定位到了5个匹配的结果,这样就会导致元素不唯一,最终无法成功查找到需要的元素

章节十、6-CSS---用CSS 定位子节点 随笔 第2张

3、因此我们在定位元素的过程中,需要再将table标签的上一级标签节点给出,table上级标签为fieldset

章节十、6-CSS---用CSS 定位子节点 随笔 第3张

4、标签与上级节点之间需要用“>”分隔,正确的写法为“fieldset>table”(如果通过这两个节点仍然定位到了多个元素,那么我们就需要继续给出更多节点,field的上级节点为“div”,那么就需要写成“div>fieldset>table”实际操作中根据自己的情况以此类推)

章节十、6-CSS---用CSS 定位子节点 随笔 第4张

章节十、6-CSS---用CSS 定位子节点 随笔 第5张

5、只有相互包含的标签才能作为上级子节点

章节十、6-CSS---用CSS 定位子节点 随笔 第6张

6、我们除了可以通过把标签作为节点以外,还可以用属性ID和class的值作为节点

使用class作为节点(用"."代替class):.block.large-row-spacer>.left-align>fieldset>.table-display(注意:在使用节点时,使用的第一个节点所包含的所有节点都必须写上,不能跳过,否则就无法定位)

章节十、6-CSS---用CSS 定位子节点 随笔 第7张

 使用ID为节点(用"#"代替id):fieldset>#product(因为该页面中有多个ID的值等于product,所有我们需要向上再查找一个节点才能准确定位)

章节十、6-CSS---用CSS 定位子节点 随笔 第8张

7、我们还可以这样写fieldset>input#name

章节十、6-CSS---用CSS 定位子节点 随笔 第9张

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄