如何从指定span类定位关联的上层父级div元素？

核心需求 #

已获取页面的BeautifulSoup对象，需批量定位所有<span class="pill css-1a10nyx e1pqc3131">元素对应的上层父级<div class="css-1v73czv eh8fd9011">，最终输出父级div内的标题内容与span元素的对应关系（示例：标题「Wooferland Festival 2022」对应span内数字253）。

解决方案 #

1. 抓取所有目标span元素 #

先定位页面中所有符合类名的span标签：

target_spans = soup.find_all('span', class_='pill css-1a10nyx e1pqc3131')

2. 精准定位目标父级div #

使用BeautifulSoup的find_parent()方法直接匹配目标父类，替代不稳定的if遍历判断：

for span in target_spans:
    # 查找最近的符合类名的父级div
    parent_div = span.find_parent('div', class_='css-1v73czv eh8fd9011')
    if parent_div:
        # 根据页面实际结构提取标题，此处假设标题在h2标签内，需自行调整
        title = parent_div.find('h2').get_text(strip=True)
        span_content = span.get_text(strip=True)
        print(f"标题：{title}，对应内容：{span_content}")

3. 处理多层级祖先元素 #

如果目标父div不是直接父级，而是上层多层的祖先，改用find_parents()获取所有符合条件的祖先，取第一个匹配项：

for span in target_spans:
    # 获取所有符合类名的祖先div，取第一个
    parent_divs = span.find_parents('div', class_='css-1v73czv eh8fd9011')
    if parent_divs:
        parent_div = parent_divs[0]
        title = parent_div.find('h2').get_text(strip=True)
        span_content = span.get_text(strip=True)
        print(f"标题：{title}，对应内容：{span_content}")

注意事项 #

• find_parent()仅返回最近的匹配父元素，find_parents()返回所有符合条件的祖先元素列表，按需选择。
• 提取标题时需根据页面实际DOM结构调整标签或类名，比如标题可能在<h3>、<div class="title">等元素内。

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