影刀RPA新手教程CSS选择器实战手册——八种语法与XPath的选型指南CSS选择器是元素定位的另一大杀器。上一篇讲了XPath这篇专攻CSS选择器并且给你XPath vs CSS的选型指南。我第一次用CSS选择器的时候觉得语法比XPath简单后来发现功能也弱一些。但某些场景下CSS选择器比XPath好用。这篇不讲废话直接给用法、给代码、给选型建议。一、CSS选择器八种语法详解1.1 语法一标签选择器最基础语法格式标签名适用场景页面上只有这一个标签或者你想选中所有这个标签。真实项目代码选中所有input标签input在影刀中的使用用【获取相似元素列表(web)】指令定位方式选择CSS选择器CSS选择器填写input元素操作选择获取元素对象为什么用这个写法比如你要给页面上所有输入框批量填入数据用标签选择器一键选中所有input。踩坑如果页面上有很多input你可能只想选中某个特定的input。解决方案用更精确的选择器比如ID选择器、类选择器。1.2 语法二类选择器最常用语法格式.类名适用场景元素的class属性稳定且你想要选中所有具有这个类名的元素。真实项目代码选中所有class包含product-title的元素.product-title为什么用这个写法电商商品列表每个商品的标题都有classproduct-title用类选择器可以一键选中所有商品标题。在影刀中的使用用【获取相似元素列表(web)】指令定位方式选择CSS选择器CSS选择器填写.product-title元素操作选择获取元素文本内容保存到变量商品标题列表踩坑点1class包含多个值。比如classproduct-title hot用.product-title是可以匹配到的因为CSS选择器的类选择器是包含逻辑不是等于逻辑。这和XPath的contains函数类似。踩坑点2类名中有空格。比如classproduct title两个不同的类名用.product.title可以同时匹配product和title两个类。如果想匹配同时包含product和title的元素用.product.title中间没有空格。如果想匹配class是product title的元素包含两个词用.product.title也可以。1.3 语法三ID选择器最精确语法格式#id值适用场景元素有id属性且id是唯一的HTML规范规定id必须唯一。真实项目代码选中id是submit-btn的元素#submit-btn为什么用这个写法id在页面上是唯一的用ID选择器定位准确率100%。踩坑如果页面上有多个相同的id虽然不符合HTML规范但有些前端会写错CSS选择器只会选中第一个。解决方案用属性选择器见语法四。1.4 语法四属性选择器最灵活属性选择器有五种写法写法一精确匹配[属性属性值]示例input[typetext]匹配所有type是text的input标签。写法二开头匹配[属性^开头部分]示例div[id^product-]匹配所有id以product-开头的div。这和XPath的starts-with函数类似。写法三结尾匹配[属性$结尾部分]示例img[src$.jpg]匹配所有src以.jpg结尾的img标签。这和XPath的ends-with函数类似但XPath 1.0不支持ends-with。写法四包含匹配[属性*部分值]示例div[class*product]匹配所有class包含product的div。这和XPath的contains函数类似。写法五单词匹配[属性~单词]示例div[class~product]匹配所有class属性中包含product这个单词的div必须是独立的单词不能是单词的一部分。区别[class*product]可以匹配classproduct-titleproduct是product-title的一部分[class~product]不能匹配classproduct-title只能匹配classproduct titleproduct是一个独立的单词1.5 语法五后代选择器最常用之一语法格式祖先选择器 后代选择器注意中间有空格表示在祖先元素里面找后代元素。真实项目代码选中product-list里面的所有product-title.product-list .product-title解释.product-list选中class是product-list的元素空格表示后代不一定是直接子元素可以是任意层级的后代.product-title选中在.product-list里面的class是product-title的元素为什么用这个写法电商商品列表商品标题都在商品列表容器里面。用后代选择器可以限定范围避免选中页面其他地方的同名元素。踩坑空格表示任意层级的后代。比如.product-list .product-title可以匹配divclassproduct-listdivspanclassproduct-title商品标题/span/div/div即使.product-title不是.product-list的直接子元素也能匹配到。如果想只匹配直接子元素用子代选择器见语法六。1.6 语法六子代选择器比后代选择器更严格语法格式父选择器 子选择器注意中间是表示只找直接子元素。真实项目代码选中product-list的直接子元素product-item.product-list .product-item解释.product-list选中class是product-list的元素表示直接子元素必须是父子关系中间不能有其他元素.product-item选中.product-list的直接子元素中class是product-item的元素为什么用这个写法如果.product-list里面还嵌套了其他.product-item比如子分类用后代选择器会匹配到所有层级的.product-item用子代选择器只匹配第一层。踩坑前后可以有空格也可以没有空格。以下三种写法等价.product-list .product-item .product-list .product-item .product-list .product-item1.7 语法七相邻兄弟选择器适合找相邻元素语法格式前一个选择器 后一个选择器注意中间是表示找紧挨着的前一个元素的后一个元素。真实项目代码选中在点赞后面的spanspan.like span解释span.like选中class是like的span表示相邻兄弟必须是紧挨着的span选中后面的span为什么用这个写法小红书笔记详情页点赞数在点赞这个span的后面且紧挨着。用相邻兄弟选择器可以精确定位。踩坑只匹配紧挨着的元素。如果中间隔了一个元素就匹配不到了。解决方案用~通用兄弟选择器。语法前一个选择器 ~ 后一个选择器示例span.like ~ span匹配所有在span.like后面的span不一定紧挨着。1.8 语法八伪类选择器最强大伪类选择器有很多种这里讲最常用的几种伪类一:nth-child(n)选中第n个子元素语法格式选择器:nth-child(n)真实项目代码选中product-list的第二个子元素.product-list .product-item:nth-child(2)解释.product-list .product-item选中.product-list的直接子元素中class是product-item的元素:nth-child(2)从中选出第二个为什么用这个写法比如你要采集商品列表的前三个商品用:nth-child(1)、:nth-child(2)、:nth-child(3)分别选中。踩坑nth-child(n)的n从1开始不是从0开始。这和XPath的child::下标一样。伪类二:first-child选中第一个子元素语法格式选择器:first-child示例.product-list .product-item:first-child等价于:nth-child(1)。伪类三:last-child选中最后一个子元素语法格式选择器:last-child示例.product-list .product-item:last-child伪类四:not(选择器)排除符合条件的元素语法格式选择器:not(排除条件)真实项目代码选中所有product-item但排除class包含advertisement的.product-item:not(.advertisement)为什么用这个写法电商商品列表里可能有广告商品用:not()可以排除广告。二、XPath vs CSS选择器选型指南2.1 功能对比功能XPathCSS选择器属性精确匹配[idkw]#kw或[idkw]属性模糊匹配contains(class,product)[class*product]以…开头starts-with(id,product-)[id^product-]以…结尾ends-with(id,.jpg)XPath 1.0不支持[id$.jpg]父元素//div/..或//div/parent::*不支持CSS没有父元素选择器子元素//div/child::span或//div/spandiv span或div span前面的兄弟preceding-sibling::span不支持CSS只能选后面的兄弟后面的兄弟following-sibling::spanspan span或span ~ span下标//div[1]div:nth-child(1)逻辑运算and、or、not():not()只有排除功能结论XPath功能更强尤其是父元素、前面的兄弟元素定位CSS选择器语法更简洁但功能弱一些2.2 性能对比一般情况下CSS选择器比XPath快。因为CSS选择器是浏览器原生支持的查询速度快XPath需要浏览器额外解析查询速度慢一些但在影刀RPA中这个差异可以忽略。因为RPA的瓶颈通常是网页加载速度、指令执行速度而不是元素定位速度。我的建议不要为了性能选CSS要根据功能需求选。2.3 选型建议优先用XPath的场景需要定位父元素parent::需要定位前面的兄弟元素preceding-sibling::需要使用复杂的逻辑运算and、or、not()需要向上遍历DOM树优先用CSS选择器的场景只需要简单的属性匹配需要选中同层级后面的兄弟元素或~觉得XPath语法太复杂想用更简洁的语法需要排除某些元素:not()我的经验新手先用元素捕获不行再用XPathXPath学会了90%的场景都能搞定CSS选择器可以作为补充但不是必须如果XPath和CSS都能实现选你熟悉的那个三、案例实战采集拼多多商品搜索结果页下面用一个完整案例把CSS选择器八种语法串起来。需求采集拼多多商品搜索结果页的商品信息商品标题商品价格商品销量商品评价数实现方案对每个数据用不同的CSS选择器语法为了演示不同语法的应用场景。3.1 采集商品标题用类选择器商品标题通常有稳定的class用类选择器最合适。CSS选择器写法.product-title指令配置用【获取相似元素列表(web)】指令定位方式选择CSS选择器CSS选择器填写.product-title元素操作选择获取元素文本内容保存到变量商品标题列表3.2 采集商品价格用后代选择器商品价格在商品容器的里面用后代选择器限定范围。CSS选择器写法.product-item .price解释.product-item商品容器空格后代选择器.price价格元素在商品容器里面指令配置用【获取相似元素列表(web)】指令定位方式选择CSS选择器CSS选择器填写.product-item .price元素操作选择获取元素文本内容保存到变量商品价格列表3.3 采集商品销量用属性选择器商品销量的class可能包含多个值用属性选择器的包含匹配。CSS选择器写法[class*sales]解释[class*sales]class包含sales的元素指令配置用【获取相似元素列表(web)】指令定位方式选择CSS选择器CSS选择器填写[class*sales]元素操作选择获取元素文本内容保存到变量商品销量列表3.4 采集商品评价数用伪类选择器商品评价数可能是某个容器的最后一个子元素用:last-child。CSS选择器写法.product-item .info:last-child解释.product-item .info商品信息容器空格后代选择器:last-child最后一个子元素指令配置用【获取相似元素列表(web)】指令定位方式选择CSS选择器CSS选择器填写.product-item .info :last-child元素操作选择获取元素文本内容保存到变量评价数列表3.5 数据整合用【ForEach列表循环】指令遍历商品标题列表同时取出对应位置的价格、销量、评价数写入Excel。具体操作流程用【获取相似元素列表(web)】指令分别获取商品标题列表、价格列表、销量列表、评价数列表用【ForEach列表循环】指令循环商品标题列表在循环体内用【获取列表项】指令按当前循环的下标取出对应位置的价格、销量、评价数用【写入Excel行】指令将标题、价格、销量、评价数写入Excel的一行四、常见报错及解决方案4.1 报错未找到元素原因CSS选择器语法写错了元素还没加载出来元素在iframe里面解决方案检查CSS选择器语法确保类名、ID名等写对在【获取元素对象(web)】指令中设置等待元素存在(s)为5秒或更长如果元素在iframe里面先用【切换到iframe(web)】指令切换到iframe再定位元素4.2 报错匹配到多个元素原因CSS选择器不够精确匹配到了多个元素。解决方案用更精确的选择器比如加上父元素限定用:nth-child(n)选中特定位置的元素改用【获取相似元素列表(web)】指令获取所有匹配的元素4.3 报错CSS选择器在影刀中不支持原因某些高级CSS语法影刀可能不支持。解决方案用更基础的CSS语法代替改用XPath选择器五、总结CSS选择器八种语法标签选择器最基础input类选择器最常用.product-titleID选择器最精确#submit-btn属性选择器最灵活[typetext]、[class*product]后代选择器最常用之一.product-list .product-title子代选择器更严格.product-list .product-item相邻兄弟选择器找相邻元素span.like span伪类选择器最强大:nth-child(n)、:not(.advertisement)XPath vs CSS选择器XPath功能更强适合复杂场景CSS选择器语法更简洁适合简单场景新手建议先学XPath覆盖90%的场景新手最重要的是多练。找个项目实战把八种语法都试一遍自然就掌握了。更多案例在影刀RPA学习主页 home.linyan.cloud#影刀RPA #CSS选择器 #XPath #元素定位 #新手入门作者林焱
