使用Beautiful Soup选择检查到的CSS类返回空值求助

核心原因 #

• 动态内容未渲染：浏览器检查看到的.Dk元素是JavaScript动态生成的，requests.get()只能获取页面初始HTML，无法加载JS渲染后的内容。
• 类名动态生成：Livescore的部分类名是随机生成的（比如.Dk可能每次请求都会变化），固定用这个类名自然匹配不到元素。

解决方法 #

1. 使用支持JS渲染的工具（如Selenium） #

通过浏览器驱动加载页面，等待JS渲染完成后再提取内容：

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from bs4 import BeautifulSoup
import time

# 替换为你的ChromeDriver路径
service = Service('chromedriver.exe')
driver = webdriver.Chrome(service=service)

driver.get("https://www.livescore.com/en/football/2022-12-06/")
time.sleep(3)  # 等待页面完全加载

soup = BeautifulSoup(driver.page_source, 'lxml')
results = soup.select('.Dk')
print(results)

driver.quit()

2. 改用稳定的选择器 #

放弃动态类名，基于元素的固定属性或结构选择：

• 比如找元素的data-*属性（如data-testid），或者父元素的固定类名：

import requests
import bs4

headers = {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36'
}

response = requests.get("https://www.livescore.com/en/football/2022-12-06/", headers=headers)
soup = bs4.BeautifulSoup(response.text, 'lxml')

# 示例：通过包含固定关键词的类名选择
matches = soup.select('div[class*="MatchCard"]')
# 或者通过data属性选择
matches = soup.select('[data-testid="match-card"]')

print(matches)

3. 模拟浏览器请求头 #

部分网站会识别非浏览器请求，添加User-Agent等请求头可以避免被拦截：

import requests
import bs4

headers = {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36',
    'Accept-Language': 'en-US,en;q=0.9'
}

response = requests.get("https://www.livescore.com/en/football/2022-12-06/", headers=headers)
soup = bs4.BeautifulSoup(response.text, 'lxml')
# 执行后续选择操作

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