如何用Python的Selenium提取CSS ::before伪元素文本？

尝试提取HTML文档中CSS ::before 伪元素的文本内容，已知BeautifulSoup这类传统HTML解析器无法渲染CSS，无法直接访问伪元素，因此采用Selenium实现。需要获取类符合hs_kw\d+_config\w+模式（示例为hs_kw11_configMs）的span元素对应的::before伪元素文本，编写的代码运行无报错，但未得到预期内容。

使用的代码如下：

from selenium import webdriver

driver = webdriver.Chrome()

driver.get('example.com')

# 类名每次都会变，通用格式是"hs_kw/d/d_config/w/w"
element = driver.find_element_by_css_selector('.hs_kw11_configMs')

before_content = driver.execute_script(
    "return window.getComputedStyle(arguments[0], '::before').getPropertyValue('content');",
    element
)

print(before_content.strip('"'))

driver.quit()

1. 等待页面完全渲染 #

Selenium打开页面后，伪元素可能还未加载完成，需添加显式等待确保元素就绪：

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

driver = webdriver.Chrome()
# 替换为实际目标页面URL
driver.get('https://car.autohome.com.cn/config/spec/67034.html#pvareaid=3454541')

# 等待目标元素出现，超时时间设为10秒
wait = WebDriverWait(driver, 10)
element = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, '.hs_kw11_configMs')))

before_content = driver.execute_script(
    "return window.getComputedStyle(arguments[0], '::before').getPropertyValue('content');",
    element
)

print(before_content.strip('"'))
driver.quit()

2. 验证伪元素的content属性 #

先在浏览器开发者工具中确认目标元素的::before伪元素是否存在有效content值：

• 选中目标span元素
• 切换到Elements面板的Styles标签，查看::before的样式规则，确认content属性不为空且有预期文本

3. 适配动态变化的类名 #

类名符合hs_kw\d+_config\w+模式，可用CSS属性选择器批量匹配：

# 匹配所有以hs_kw开头、包含_config的span元素
element = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, 'span[class^="hs_kw"][class*="_config"]')))

这样无需每次手动修改类名，适配动态生成的类。

4. 处理iframe或Shadow DOM #

如果目标元素嵌套在iframe内，需先切换到对应iframe：

iframe = driver.find_element(By.TAG_NAME, 'iframe')
driver.switch_to.frame(iframe)
# 之后再查找目标元素

若元素在Shadow DOM中，需通过JavaScript获取Shadow Root后访问元素：

element = driver.execute_script("""
return document.querySelector('span[class^="hs_kw"]').shadowRoot.querySelector('.target-class');
""")

5. 匹配浏览器与驱动版本 #

ChromeDriver版本需与本地Chrome浏览器版本一致，版本不兼容可能导致渲染或脚本执行异常，建议下载对应版本的驱动。

内容的提问来源于stack exchange，提问作者Uzair Ahmed.