影刀RPA新手教程：CSS选择器完全指南

影刀RPA深度教程CSS选择器完全指南8种语法实战案例XPath能做的CSS选择器基本都能做而且语法更简洁、执行更快。影刀同时支持XPath和CSS选择器关键是知道什么时候用哪个。先装好环境www.yingdao.com 下载社区版免费。装完去Chrome装影刀插件。CSS vs XPath先搞清楚区别能力XPathCSS选择器按id选择//input[idkw]#kw按class选择//div[classprice].price按属性选择//input[nameuser]input[nameuser]按文字内容选择//button[contains(text(),登录)]❌ 不支持找父元素//td/..或parent::❌ 不支持找兄弟元素following-sibling::❌ 不支持性能较慢更快结论需要按文字定位 → 只能用XPath需要找父/兄弟元素 → 只能用XPath其他场景 → 优先用CSS更简洁快速语法一按id选择最常用语法#id值实战定位百度搜索框#kw对应XPath//input[idkw]实战定位登录按钮#login-btn坑点id里如果有.或#等特殊字符要用\转义#my\.id/* id是my.id时需要转义 */语法二按class选择语法.class值实战定位价格元素.price匹配所有class包含price的元素可以是price、goods-price、price-old。多个class叠加.price.current匹配同时有price和current两个class的元素。对应XPath//*[contains(class,price) and contains(class,current)]CSS明显更简洁。语法三按标签名选择拼多多店群自动化上架方案语法tag名实战定位所有input输入框input实战定位所有按钮button组合使用input.text-input/* class为text-input的input元素 */button.submit-btn/* class为submit-btn的button元素 */语法四按属性选择语法[属性名值]实战定位name为username的输入框input[nameusername]实战定位type为submit的按钮input[typesubmit]属性包含某个值类似XPath的containsinput[name*user]/* name属性包含user */a[href^https]/* href以https开头 */a[href$.pdf]/* href以.pdf结尾 */CSS属性选择器含义XPath等价写法[name*user]包含//*[contains(name,user)][href^https]开头是//*[starts-with(href,https)][href$.pdf]结尾是//*[ends-with(href,.pdf)]注意XPath 2.0才有ends-with()浏览器里的XPath 1.0不支持这是CSS的优势。语法五按层级关系选择后代选择器空格div.content p选择div classcontent里面的所有p元素不限层级深度。对应XPath//div[classcontent]//p直接子元素选择器div.content p只选择div classcontent的直接子元素p不递归。对应XPath//div[classcontent]/p相邻兄弟选择器h1 p选择紧接在h1后面的第一个p。后续兄弟选择器~h1 ~ p选择h1后面所有p兄弟元素。语法六按位置选择伪类选择第一个元素li:first-child对应XPath(//li)[1]选择最后一个元素li:last-child 对应XPath(//li)[last()]选择第N个元素li:nth-child(3)选择第3个li。选择奇数/偶数行表格斑马纹tr:nth-child(odd)/* 奇数行 */tr:nth-child(even)/* 偶数行 */选择前5个元素li:nth-child(-n5)语法七按状态选择表单专用选择被选中的radio/checkboxinput:checked选择禁用状态的按钮button:disabled选择空输入框input:empty选择可见元素div:not([style*display:none])语法八组合选择器多个条件同时满足多个条件无空格input.text-input.error选择同时有text-input和error两个class的input元素。选择多个元素逗号分隔h1,h2,h3同时选择所有h1、h2、h3。TEMU店群如何管理运营综合实战淘宝搜索结果页以淘宝搜索手机的结果页为例用CSS选择器定位各元素。搜索输入框#q/* 按id */input[nameq]/* 按属性 */搜索按钮button[typesubmit]商品标题链接.a-title/* class包含a-title的元素 */商品价格.em-price/* class包含em-price的元素 */下一页按钮.next/* class包含next的元素 */在影刀里怎么用CSS选择器影刀捕获元素后默认生成的是XPath。要改用CSS选择器捕获元素后点编辑元素把定位方式从XPath改成CSS选择器输入写好的CSS表达式点校验元素确认能匹配到调试CSS选择器的方法方法1浏览器开发者工具按F12打开开发者工具按CtrlF在Elements标签里打开搜索框输入CSS选择器匹配的元素的会高亮方法2Console里测试在Console标签里输入document.querySelectorAll(.price)回车如果返回了元素列表说明选择器正确。一个完整的实战案例小红书笔记列表小红书搜索结果页用CSS选择器批量定位笔记链接/* 所有笔记的链接 */a.cover[data-v-*]/* 更精准只取class包含cover的a标签 */a[class*cover]/* 取前10个笔记 */a[class*cover]:nth-child(-n10)对应的XPath写法更啰嗦//a[contains(class,cover)] (//a[contains(class,cover)])[position()10]什么时候必须用XPath以下场景CSS选择器做不到必须用XPath按文字内容定位//button[contains(text(),登录)] ✅ XPath能 button:contains(登录) ❌ CSS不支持找父元素//td[text()张三]/.. ✅ XPath能 td:has-text(张三) parent ❌ CSS不支持找兄弟元素//td[text()张三]/following-sibling::td[1] ✅ XPath能 ❌ CSS不支持更多CSS选择器和XPath的对比速查表可以在 home.linyan.cloud 查找。#影刀RPA #CSS选择器 #元素定位 #网页自动化 #进阶教程作者林焱