如何使用CSS选择器从相同className的元素列表中定位指定元素？

注意：W3C标准CSS选择器暂不支持基于元素内部文本进行匹配的能力，无法像XPath那样直接通过文本定位元素，因此可以结合你提到的「先匹配全量列表项再过滤文本」的思路实现，或是在元素顺序固定的场景下使用顺序伪类定位。
另外你原有的XPath存在标签匹配错误：DOM中列表项为div标签，但你的XPath写的是span标签，替换方案时需要修正该偏差。

方案1：先定位全量列表项再过滤文本（稳定性最高，适配顺序可变场景） #

完全符合你提到的实现思路，代码如下：

1. 首先用CSS选择器定位所有列表项

@FindBy(css = ".input-search-suggests .input-search-suggests-item")
private List<WebElement> suggestItemList;

2. 封装过滤方法获取对应文本的元素

public WebElement getSuggestItem(String targetText) {
    for (WebElement item : suggestItemList) {
        if (item.getText().trim().equals(targetText)) {
            return item;
        }
    }
    throw new NoSuchElementException("未找到匹配文本的建议项：" + targetText);
}

// 调用获取A元素
WebElement itemA = getSuggestItem("A");

方案2：顺序固定场景直接定位（性能最优，代码最简洁） #

如果你的业务场景中"A"固定为第一个搜索建议项，可以直接用CSS的顺序伪类实现定位：

@FindBy(css = ".input-search-suggests .input-search-suggests-item:first-child")
private WebElement itemA;

如果顺序有变化，比如是第n个项，可以把:first-child替换为:nth-child(n)即可。

内容的提问来源于stack exchange，提问作者Prozorov