CSS表达式——下篇【selenium】
CSS选择器的组合与进阶用法
在自动化测试或网页抓取中，CSS选择器不仅能定位单个元素，还支持组合使用，帮助我们准确锁定嵌套结构或多个条件的元素。
✅ 联合定位：层级结构的组合
假设我们要选中网页中这段 HTML 结构里的 版权 标签：
<div id="bottom"><div class="footer1"><span class="copyright">版权</span><span class="date">发布日期：2018-03-03</span></div>
</div>
我们可以利用选择器语法，指定 span 标签和其上级的结构关系，比如：
div.footer1 > span.copyright含义是：选择 class 为 copyright 的 span 元素，且它是 class 为 footer1 的 div 的直接子元素。
我们还可以进一步简化：
.footer1 > .copyright不限定标签类型，只关注类名的结构匹配。
如果不强制“直接子节点”，而是允许任意层级后代关系，还可以用空格代替 >：
.footer1 .copyright✅ 多重选择：组选择（Group Selector）
有时候我们希望一次性选中多种类型的元素，可以用 逗号 , 来组合多个条件。
例如，选中所有植物和动物的标签：
.plant, .animal如果你还想同时选中所有 div 标签以及 id 为 BYHY 的元素：
div, #BYHY在 Selenium 中可以直接这么用：
elements = wd.find_elements(By.CSS_SELECTOR, 'div, #BYHY')⚠️ 注意：虽然表达式的顺序是 div, #BYHY，但最终返回的元素顺序由 HTML 页面中元素的出现顺序决定，而不是选择器书写的先后。
❌ 错误组写法示例
假设我们想选中 id=t1 容器中的 span 和 p 标签，很多初学者可能会写成：
#t1 > span, p但这个选择器实际的意思是：
- 匹配
#t1下的span - 和 整个文档中的所有
p标签
这会导致选择器“范围溢出”。
正确写法应该是：
#t1 > span, #t1 > p确保每一个选择项都带有完整的上下文。
🎯 精准定位：按顺序选中子节点
借助 :nth-child()、:nth-of-type() 等伪类，我们可以按位置选中特定元素。
HTML 示例：
<div id="t1"><h3>唐诗</h3><span>李白</span><p>静夜思</p><span>杜甫</span><p>春夜喜雨</p>
</div>
✅ 选择第二个子元素：
span:nth-child(2)含义是：选择在其父元素中，排列位置是第2位的 span 元素（注意，位置是按所有子节点计算，不是只看 span）。
❗如果不指定标签类型：
:nth-child(2)表示：选中父元素中所有类型中排第2的那个，不管它是什么标签。
🔁 倒数选择
和 nth-child(n) 相对的是 nth-last-child(n)，它是从结尾往前数。
例子：
p:nth-last-child(1)代表：倒数第一个且是 <p> 标签的元素。
✅ 按标签类型顺序匹配（更推荐）
使用 nth-of-type(n) 更准确，只看特定标签类型的顺序。
span:nth-of-type(1)选择的是：当前父元素中第一个 <span> 标签。
类似地：
p:nth-last-of-type(2)就是倒数第二个 <p> 标签。
🔁 奇偶位置选择
快速选中偶数或奇数序号的元素也非常常见。
- 偶数子节点（无类型限制）：
:nth-child(even)- 奇数子节点（无类型限制）：
:nth-child(odd)- 偶数个某类型元素：
p:nth-of-type(even)- 奇数个某类型元素：
p:nth-of-type(odd)这些可以用在循环内容或列表内容的批量样式处理上，也适合 UI 测试中进行校验。
👬 兄弟节点定位技巧
有些元素和目标元素是同级的，CSS 也提供了选择这些“兄弟”的方法。
✅ 相邻兄弟选择器（紧挨着的）
h3 + span选中的是：紧跟在 <h3> 标签后面的第一个 <span> 元素。
✅ 后续所有兄弟
h3 ~ span表示选中：同一个父元素下，所有在 <h3> 后出现的 <span> 标签。
🔚 总结说明
- 组合选择器（比如
.a > .b）适用于父子层级结构 - 组选择器（如
.x, .y）适合多目标统一操作 nth-child()vsnth-of-type()是两个常见但容易混淆的定位工具- 兄弟选择器
+和~能帮助你按“位置关系”筛选相邻元素
这些 CSS 语法在 Selenium 中通过 By.CSS_SELECTOR 调用，使你可以用一种非常强大、精确的方式控制页面元素定位。