元素定位练习 · CSS 选择器定位

📌 方法概念
原理：CSS 选择器是浏览器渲染页面时原生使用的定位语法，通过元素的标签、属性、class/id、层级关系等组合来定位；浏览器底层直接解析，比 XPath 更简洁、执行速度更快。
适用场景：
① class 有特征（判断标准：用这个 class 当选择器，能不能精准定位到你想要的元素 —— 不是一堆，也不是零个）：
    ✅ 好 class（有特征）：.login-btn 只能定位登录按钮这 1 个；.danger-btn 只能定位"删除 / 清空"这组危险操作按钮 —— 拿得准。
    ❌ 差 class（没特征）：.btn 页面上所有 30 个按钮都有 —— 定位多个元素，分不清谁是谁。
    定位精准 → 有特征；定位多了或少了 → 没特征。
    多 class 组合可以让它变精准：.nav-item.active（同时满足两个 class）比单独用 .nav-item（一堆）或 .active（可能别处也有）都更准。
② 属性前缀/后缀/子串：id 是 css_btn_login_1 这种动态数字 → [id^='css_btn_login'] 前缀匹配；
    href 都是 .html 结尾 → a[href$='.html'] 后缀匹配；class 含 btn 子串 → [class*='btn'] 子串匹配；
③ 按位置取：6 个任务项取奇数位 → #task_list li:nth-child(odd)；取第 3 个 → li:nth-child(3)；
④ 状态筛选：勾选了通知的复选框 → input[name='notify']:checked；置灰禁用的按钮 → button:disabled；
⑤ 层级/组合：找某个容器内的按钮 → #sidebar .menu-item（后代），.card > .title（直接子级），.label + .input（紧邻下一个兄弟）。
注意事项：不支持 text() 文本内容匹配，不支持 parent:: 向上父级轴定位，索引从 1 开始（与 XPath 一致但不同于 JS 的 0 基）。

💻 Selenium 示例（Python）

from selenium import webdriver
from selenium.webdriver.common.by import By
form = driver.find_element(By.CSS_SELECTOR, "#sec-by-css .register-form")  # 组合定位：id + class + 后代
even_tasks = driver.find_elements(By.CSS_SELECTOR, "#css_task_list li:nth-child(even)")  # 偶数位任务
notify_checks = driver.find_elements(By.CSS_SELECTOR, "#sec-by-css input[name='css_notify']:checked")  # 已勾选通知

📋 本节练习清单

• ✅ 练习目标 1：个人设置表单 — 填写昵称/年龄/签名 → 勾选/取消通知复选框（练习 :checked）→ 点标签切换 .active → 点「保存设置」观察效果区输出；再点「重置设置」验证默认值恢复（:checked 只剩系统公告、标签只剩自动化测试）
• ✅ 练习目标 2：任务清单 6 条 — 点击 li 切换完成态（出现 .done 类 + 删除线）；练习 :nth-child(odd) 取奇数位、li[data-priority='urgent'] 取紧急项、.done 取已完成项；最后打开浏览器 F12 控制台，输入 $$('.css-tag.active').length 回车，对比 Selenium 脚本里 len(driver.find_elements(By.CSS_SELECTOR, ".css-tag.active")) 的值是否一致（底层都是 querySelectorAll，应该完全相同）