CSS表达式——下篇【selenium】

CSS选择器的组合与进阶用法

在自动化测试或网页抓取中，CSS选择器不仅能定位单个元素，还支持组合使用，帮助我们准确锁定嵌套结构或多个条件的元素。

✅ 联合定位：层级结构的组合

假设我们要选中网页中这段 HTML 结构里的 版权 标签：

css 复制代码

<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 标签，很多初学者可能会写成：

css 复制代码

#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() vs nth-of-type() 是两个常见但容易混淆的定位工具
兄弟选择器 + 和 ~ 能帮助你按"位置关系"筛选相邻元素

这些 CSS 语法在 Selenium 中通过 By.CSS_SELECTOR 调用，使你可以用一种非常强大、精确的方式控制页面元素定位。