CSS 表达式 （下）
掌握高级 CSS 选择器语法
能处理列表、表格等复杂结构的定位
理解伪类选择器的使用场景
核心讲解
（1）伪类选择器（按位置筛选）表格
选择器 | 功能 |
|---|---|
| 匹配第一个子元素 |
| 匹配最后一个子元素 |
| 匹配第 n 个子元素，从 1 开始 |
| 倒数第 n 个 |
表格
选择器 | 功能 |
|---|---|
| 匹配元素 1 后面紧邻的第一个兄弟元素 2 |
| 匹配元素 1 后面所有的兄弟元素 2 |
表格
选择器 | 功能 |
|---|---|
| 属性值以指定内容开头 |
| 属性值以指定内容结尾 |
| 属性值包含指定内容 |
:not(选择器)：排除匹配的元素，比如 input:not(.disabled)
代码示例
from selenium import webdriver
from selenium.webdriver.common.by import By
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
driver.maximize_window()
# 1. 第一个子元素
first_nav = driver.find_element(By.CSS_SELECTOR, "#s-top-left a:first-child")
print("第一个导航：", first_nav.text)
# 2. 第n个子元素
third_nav = driver.find_element(By.CSS_SELECTOR, "#s-top-left a:nth-child(3)")
print("第三个导航：", third_nav.text)
# 3. 最后一个子元素
last_nav = driver.find_element(By.CSS_SELECTOR, "#s-top-left a:last-child")
print("最后一个导航：", last_nav.text)
# 4. 紧邻兄弟
news_next = driver.find_element(By.CSS_SELECTOR, ".mnav-news + a")
print("新闻后面的链接：", news_next.text)
# 5. 所有兄弟
news_all_next = driver.find_elements(By.CSS_SELECTOR, ".mnav-news ~ a")
print("新闻后面所有链接数：", len(news_all_next))
# 6. 属性包含
links = driver.find_elements(By.CSS_SELECTOR, "a[href*='baidu.com']")
print("包含baidu的链接数：", len(links))
# 7. 取反：除了图片的所有导航
nav_text = driver.find_elements(By.CSS_SELECTOR, "#s-top-left a:not(.s-top-more-btn)")
driver.quit()
常见误区
nth-child 索引从 0 开始：CSS 的 nth-child 是从 1 开始计数，不是从 0
nth-child 和 nth-of-type 混淆：nth-child 是所有子元素排序，nth-of-type 是同标签排序
伪类用错位置：伪类要写在最后面的元素上
复杂页面滥用 CSS：特别复杂的定位，CSS 写起来麻烦，不如用 XPath
课后练习
用 CSS 选择器定位列表中第 3 个元素
定位表格中第 2 行第 3 列的单元格
用属性结尾匹配，定位所有.png 结尾的图片
