如何用CSS选择器选取HTML元素的尾部文本？技术咨询

这确实是个容易踩的小坑——CSS选择器只能定位元素节点，没法直接选中元素内部的独立文本片段。你要提取的(20 pages)是<a>标签里的一个文本节点，不是嵌套的<span>这类元素，所以纯CSS选择器肯定搞不定，得用DOM解析工具来处理节点树。

先明确下目标HTML结构：

<a href="###" title="the 360 chapter" target="_blank"> <span class="red">the 360 chapter</span> (20 pages) </a>

下面分两种常用的采集场景给你具体实现方案：

1. Python环境（用BeautifulSoup） #

这是Python做数据采集最常用的库，能轻松遍历DOM节点：

from bs4 import BeautifulSoup

# 假设你已经拿到了目标HTML片段
html = '<a href="###" title="the 360 chapter" target="_blank"> <span class="red">the 360 chapter</span> (20 pages) </a>'
soup = BeautifulSoup(html, 'html.parser')

# 先定位到目标<a>标签（可以根据title、href等属性精准定位）
target_a = soup.find('a', title='the 360 chapter')

# 遍历<a>的所有子节点，筛选出非空的文本节点
text_fragments = []
for node in target_a.children:
    # 判断是否是文本节点，并且去掉空白后内容不为空
    if isinstance(node, str) and node.strip():
        text_fragments.append(node.strip())

# 这里text_fragments的最后一个元素就是你要的内容
page_info = text_fragments[-1]
print(page_info)  # 输出: (20 pages)

2. JavaScript环境（比如Puppeteer/浏览器控制台） #

如果是用Node.js做爬虫或者前端脚本采集，这么处理：

// 先定位到目标<a>标签
const targetA = document.querySelector('a[title="the 360 chapter"]');

// 筛选出所有非空的文本节点
const textFragments = Array.from(targetA.childNodes)
  .filter(node => node.nodeType === Node.TEXT_NODE) // 只保留文本节点
  .map(node => node.textContent.trim()) // 去掉前后空白
  .filter(text => text); // 过滤掉空文本

// 取最后一个片段就是目标内容
const pageInfo = textFragments.pop();
console.log(pageInfo); // 输出: (20 pages)

备选方案：字符串截取（仅限格式稳定的情况） #

如果目标页面的文本格式不会变（比如<span>的内容固定在前面，页数文本固定在后面），也可以直接提取<a>的全部文本后做字符串分割：

# Python示例
full_text = target_a.get_text(strip=True, separator='|')
page_info = full_text.split('|')[-1]

不过这种方法容错性差，如果页面文本格式调整就会失效，优先推荐前面的节点筛选方法。

核心逻辑就是：CSS只能选元素，要抓文本节点必须用DOM解析库遍历节点树，区分元素和文本节点后再提取。

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