css selector

🌟 ‌核心语法与使用场景‌

CSS选择器通过‌元素属性、层级关系、状态‌精准定位元素，语法简洁高效。

‌1. 基础选择器‌

类型	语法示例	说明
‌ID‌	#username	定位id="username"的元素
‌Class‌	.btn-primary	定位class包含btn-primary的元素
‌属性精确匹配‌	[type="submit"]	匹配type属性为submit的元素
‌标签+属性组合‌	input[placeholder]	所有带placeholder属性的<input>

‌2. 层级关系‌

组合方式	语法示例	作用
‌后代选择器‌	div .item	div内‌任意层级‌的.item元素
‌直接子元素‌	ul > li	仅匹配ul的‌直接子级‌<li>
‌相邻兄弟‌	h2 + p	紧接在h2‌之后‌的<p>元素

‌3. 伪类与状态‌

pythonCopy Code

# 匹配鼠标悬停状态
driver.find_element(By.CSS_SELECTOR, "a:hover")

# 匹配被选中的复选框
driver.find_element(By.CSS_SELECTOR, "input[type='checkbox']:checked")

# 匹配第一个子元素
driver.find_element(By.CSS_SELECTOR, "ul li:first-child")

---

🔍 ‌高级匹配技巧‌

‌1. 部分属性匹配‌

匹配方式	语法示例	说明
‌属性包含子串‌	[class*="error"]	class中含有error（如error-msg）
‌属性以子串开头‌	[id^="dynamic_"]	id以dynamic_开头
‌属性以子串结尾‌	[href$=".pdf"]	链接指向PDF文件

‌2. 转义特殊字符‌

若属性值含特殊符号（如#、:、空格），需用引号包裹或转义：

pythonCopy Code

# 属性值含空格
driver.find_element(By.CSS_SELECTOR, '[data-test="user name"]')

# 转义冒号
driver.find_element(By.CSS_SELECTOR, 'div[data-id="\\:button1"]')

---

⚡ ‌CSS vs XPath 性能对比‌

场景	CSS选择器优势	XPath适用场景
‌简单属性组合‌	语法简洁，解析速度快	需要复杂逻辑（如文本内容匹配）
‌层级定位‌	直接子级(>)效率高	跨层级深度搜索（如//div//span）
‌浏览器优化‌	现代浏览器优先优化CSS	旧版浏览器兼容性更好

---

🛠️ ‌调试工具‌

1. ‌浏览器控制台验证‌：

   javascriptCopy Code

   // 检查匹配元素数量
   $$("button.primary[disabled]").length  
   // 查看具体元素
   $$("input#email")
   

2. ‌Selenium IDE‌：
   使用录制工具自动生成CSS选择器路径。

---

‌最佳实践‌

1. ‌优先使用唯一属性‌（如id、data-testid）。
2. ‌避免过度嵌套‌（如div > form > .field > input可能脆弱）。
3. ‌动态内容‌使用部分匹配符（^、$、*）。

掌握CSS选择器可大幅提升自动化脚本的‌稳定性和执行效率‌！ 🚀