水晶启幕篇-Day5｜元素搜寻咒：CSS 选择器，定位网页魔法元素

📖 知识点

1. 什么是元素？

网页里的按钮、输入框、文字、图片…… 每个都是 "元素"。想操控它们，第一步就是用咒语把它找出来。

2. CSS 选择器：定位元素的咒语

CSS 选择器就是一套 "寻物口令"，按网页标签的特征来锁定元素。先掌握三个最常用的：

优先级口诀：标签 < 类名 < id（id 最精准，网页里 id 唯一）。

3. DrissionPage 元素定位咒语

用 page.ele() 方法 + CSS 选择器来查找元素：

# 按标签找第一个button元素
btn = page.ele("button")
# 按类名找
input_box = page.ele(".search-input")
# 按id找
logo = page.ele("#s_lg_img")

💡 常用选择器写法

• page.ele("button")：找第一个按钮
• page.ele(".class名称")：找第一个带此类的元素
• page.ele("#id名称")：找第一个带此 id 的元素
• page.ele("css:选择器")：显式声明用 css 语法（更规范）

⚠️ 易错提醒

1. page.ele() 默认找第一个匹配的元素，只返回一个
2. 找不到时返回 None，此时再对 None 操作会报错
3. 类名前面要加 .，id 前面要加 #，别漏掉

⚔️ Kata 实战任务

任务需求：

1. 导入 ChromiumPage，访问百度
2. 使用 CSS 选择器定位几个元素：
   • 用 # id 定位百度 logo 元素
   • 用 . 类名定位搜索输入框
   • 用标签名定位搜索按钮
3. 打印找到的元素（ele 对象）

参考代码

from DrissionPage import ChromiumPage

page = ChromiumPage()
page.get("https://www.baidu.com")

# 元素搜寻咒：用CSS选择器定位元素
# 按id找百度logo
logo = page.ele("#s_lg_img")
# 按类名找搜索输入框
search_input = page.ele(".s_ipt")
# 按标签名找搜索按钮
search_btn = page.ele("button")

# 打印定位结果（返回元素对象）
print("🎯 定位到logo元素：", logo)
print("🎯 定位到输入框元素：", search_input)
print("🎯 定位到按钮元素：", search_btn)

运行输出（元素对象形式示意）：

🎯 定位到logo元素： <ChromiumElement div#s_lg_img>
🎯 定位到输入框元素： <ChromiumElement input.s_ipt>
🎯 定位到按钮元素： <ChromiumElement button#su>

🧠 思考题

1. 如果某个网页元素的 class 很多（如 class="btn btn-primary"），CSS 选择器该写 .btn 还是 .btn-primary？都能找到吗？
2. page.ele() 找不到元素时返回什么？如果对返回值继续调用方法，会报什么错？