首页 > Web开发 > 详细

章节十、6-CSS---用CSS 定位子节点

时间:2019-04-12 10:59:00      阅读:140      评论:0      收藏:0      [点我收藏+]

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

一、通过子节点定位元素

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

技术分享图片

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

技术分享图片

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

技术分享图片

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

技术分享图片

技术分享图片

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

技术分享图片

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

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

技术分享图片

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

技术分享图片

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

技术分享图片

章节十、6-CSS---用CSS 定位子节点

原文:https://www.cnblogs.com/luohuasheng/p/10694441.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!