Beautiful Soup 遇到嵌套 HTML 的麻烦

Question

使用 Beautiful soup，我似乎无法捕获所有 HTML 元素。具体来说，我的目标是尝试在

中获取 4 值

    <button class="css-812ha7 " type="button">4</button>

但是我在使用漂亮的汤时遇到了麻烦，因为我无法捕获嵌套标签

代码：

soup.select('.css-rs2cuv')

返回：

[
     <div class="css-rs2cuv">
         <button class="css-rzdbbc" type="button">
             <svg class="css-1jc5boz" viewbox="0 95 57 95">
                 <path d="M57 142.5L9.5"></path>
             </svg>
         </button>
         <button class="css-rzdbbc" type="button">
             <svg class="css-15yx468" viewbox="0 95 57 95">
                 <path d="M57 142.5L9.5 95 0 104.5l38"></path>
             </svg>
         </button>
     </div>
]

我以为我的代码行会返回所有标签和嵌套标签，然后我可以运行更多方法来获取我想要的值

我正在解析的 HTML：

<div class="css-rs2cuv">
    <button class="css-rzdbbc" type="button">
        <svg viewBox="0 95 57 95" class="css-1jc5boz">
             <path d="M57 142.5L9.5"></path>
        </svg>
    </button>
    <button class="css-10po51q " type="button">1</button>
    <button class="css-812ha7 " type="button">2</button>
    <button class="css-812ha7 " type="button">3</button>
    <div class="css-ufx8pa " data-comp="Flex Box">...</div>
    <button class="css-812ha7 " type="button">4</button>
    <button class="css-mnn3vx " type="button">
        <svg viewBox="0 95 57 95" class="css-15yx468 ">
            <path d="M57 142.5L9.5 95 0 104.5l38"></path>
        </svg>
    </button>
</div>

Answer 1

select 返回与该标签匹配的所有标签的列表。您可以使用此列表的索引来获取所需的标签，然后使用.text 获取其中的文本。

from bs4 import BeautifulSoup
html="""
<div class="css-rs2cuv">
    <button class="css-rzdbbc" type="button">
        <svg viewBox="0 95 57 95" class="css-1jc5boz">
             <path d="M57 142.5L9.5"></path>
        </svg>
    </button>
    <button class="css-10po51q " type="button">1</button>
    <button class="css-812ha7 " type="button">2</button>
    <button class="css-812ha7 " type="button">3</button>
    <div class="css-ufx8pa " data-comp="Flex Box">...</div>
    <button class="css-812ha7 " type="button">4</button>
    <button class="css-mnn3vx " type="button">
        <svg viewBox="0 95 57 95" class="css-15yx468 ">
            <path d="M57 142.5L9.5 95 0 104.5l38"></path>
        </svg>
    </button>
</div>
"""
soup=BeautifulSoup(html,'html.parser')
print(soup.select('.css-812ha7')[2].text)

输出

4

Answer 2

没有足够的 html 来判断您是否需要使用 select 或 select_one（select_one 将返回第一个匹配项），但是对于显示的 html，您可以使用所需元素之前的属性之间的关系（通过指定 [data-comp='Flex Box']) 的 attribute=value selector，与您要抓取的元素的类相邻的兄弟组合。 + 是 adjacent sibling combinator。

对于这个 css 选择器组合有多个匹配项，如果不是第一个，select 可用于检索所有匹配项；您可以对其进行索引以检索特定项目。

在这种情况下，单独使用类名作为选择器几乎肯定会更快，但值得留意其他方法。

from bs4 import BeautifulSoup
html="""
<div class="css-rs2cuv">
    <button class="css-rzdbbc" type="button">
        <svg viewBox="0 95 57 95" class="css-1jc5boz">
             <path d="M57 142.5L9.5"></path>
        </svg>
    </button>
    <button class="css-10po51q " type="button">1</button>
    <button class="css-812ha7 " type="button">2</button>
    <button class="css-812ha7 " type="button">3</button>
    <div class="css-ufx8pa " data-comp="Flex Box">...</div>
    <button class="css-812ha7 " type="button">4</button>
    <button class="css-mnn3vx " type="button">
        <svg viewBox="0 95 57 95" class="css-15yx468 ">
            <path d="M57 142.5L9.5 95 0 104.5l38"></path>
        </svg>
    </button>
</div>
"""
soup = BeautifulSoup(html,'lxml')
print(soup.select_one("[data-comp='Flex Box'] + .css-812ha7").text)