如何用CSS选择器获取指定dt元素下的所有dd元素？

需要抓取网页中标题为“Life Cycle”的<dt>元素对应的所有<dd>元素，该<dt>下可能包含1个或多个<dd>。此前尝试的选择器存在局限性：

• dt:contains('Life Cycle:') + dd 仅能获取第一个<dd>元素
• dt:contains('Life Cycle:') ~ dd 会返回该<dt>之后的所有<dd>，包括其他<dt>下的元素

目标网页的HTML结构示例如下：

<dl>
    <span>Attributes:</span>
        <dt>Life Cycle:</dt>
            <dd><span>Perennial</span></dd>
            <dd><span>Woody</span></dd>
        <dt>Text:</dt>
                <dd><span>Text</span></dd>
        <dt>Text:</dt>
                <dd><span>Text</span></dd>
       <dt>Text:</dt>
       <dd><span>Text</span></dd>
       <dd><span>Text</span></dd>
</dl>

解决方案 #

兼容多数环境的CSS选择器 #

使用以下选择器可精准获取目标<dt>对应的所有<dd>元素：

dt:contains('Life Cycle:') ~ dd:not(dt:not(:contains('Life Cycle:')) ~ dd)

原理：

1. dt:contains('Life Cycle:') ~ dd 先选中目标<dt>之后的所有<dd>元素
2. :not(dt:not(:contains('Life Cycle:')) ~ dd) 排除掉位于其他非目标<dt>之后的<dd>，最终仅保留目标<dt>对应的所有<dd>

支持CSS选择器4的环境（如新版Chrome、Puppeteer） #

如果工具支持CSS选择器4的:has伪类，可使用更直观的写法：

dl > dt:contains('Life Cycle:') ~ dd:not(:has(+ dt:not(:contains('Life Cycle:'))))

原理：
选中目标<dt>之后的所有<dd>，且这些<dd>的下一个兄弟元素不是非目标<dt>，即只取到下一个<dt>之前的所有<dd>。

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