处理 BeautifulSoup CSS 选择器中的冒号

Posted 2023-03-06

【中文标题】处理 BeautifulSoup CSS 选择器中的冒号

【英文标题】：Dealing with a colon in BeautifulSoup CSS selectors

【发布时间】：2016-04-05 20:24:40

【问题描述】：

输入 HTML：

<div style="display: flex">
    <div class="half" style="font-size: 0.8em;width: 33%;"> apple </div>
    <div class="half" style="font-size: 0.8em;text-align: center;width: 28%;"> peach </div>
    <div class="half" style="font-size: 0.8em;text-align: right;width: 33%;" title="nofruit"> cucumber </div>
</div>

期望的输出：所有div元素正好在<div style="display: flex">之下。

我正在尝试使用 CSS selector 定位父 div：

div[style="display: flex"]

这会引发错误：

>>> soup.select('div[style="display: flex"]')
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "/Users/user/.virtualenvs/so/lib/python2.7/site-packages/bs4/element.py", line 1400, in select
    'Only the following pseudo-classes are implemented: nth-of-type.')
NotImplementedError: Only the following pseudo-classes are implemented: nth-of-type.

看起来BeautifulSoup 试图将冒号解释为伪类语法。

我已尝试遵循 Handling a colon in an element ID in a CSS selector 建议的建议，但仍然会引发错误：

>>> soup.select('div[style="display\: flex"]')
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "/Users/user/.virtualenvs/so/lib/python2.7/site-packages/bs4/element.py", line 1400, in select
    'Only the following pseudo-classes are implemented: nth-of-type.')
NotImplementedError: Only the following pseudo-classes are implemented: nth-of-type.
>>> soup.select('div[style="display\3A flex"]')
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "/Users/user/.virtualenvs/so/lib/python2.7/site-packages/bs4/element.py", line 1426, in select
    'Unsupported or invalid CSS selector: "%s"' % token)
ValueError: Unsupported or invalid CSS selector: "div[style="displayA"

问题：

在BeautifulSoup CSS 选择器的属性值中使用/转义冒号的正确方法是什么？

---

请注意，我可以通过部分属性匹配来解决它：

soup.select("div[style$=flex]")

或者，使用find_all()：

soup.find_all("div", style="display: flex")

另外请注意，我了解使用style 定位元素远非一种好的定位技术，但问题本身是通用的，提供的 html 只是一个示例。

【问题讨论】：

我假设您也尝试过两个反斜杠？ soup.select('div[style="display\\: flex"]')

@JoshCrozier 新年快乐，是的，以及原始字符串和常规字符串的不同组合。谢谢。仍然认为我只是错过了smth。

... 笏。谈论破碎。

【参考方案1】：

更新：该问题现已在 BeautifulSoup 4.5.0 中得到修复，如有需要请升级：

pip install --upgrade beautifulsoup4

---

旧答案：

在BeautifulSoup 问题跟踪器上创建了一个问题：

Dealing with a colon in BeautifulSoup CSS selectors

如果启动板问题有任何更新，将更新答案。

【参考方案2】：

不确定这是否完全是一个答案，因为它肯定被破坏了。然而，奇怪的是，错误不是由: 本身触发的，而是由: 后跟一个空格触发的。该错误表明它正在尝试使用空格之后的任何内容作为 CSS 选择器。

例如，编辑 HTML 以删除空格使块再次可选择：

>>> from bs4 import BeautifulSoup
>>> html = """
... <div style="display:flex">
...     <div class="half" style="font-size: 0.8em;width: 33%;"> apple </div>
...     <div class="half" style="font-size: 0.8em;text-align: center;width: 28%;"> peach </div>
...     <div class="half" style="font-size: 0.8em;text-align: right;width: 33%;" title="nofruit"> cucumber </div>
... </div>
... """

>>> soup = BeautifulSoup(html)
>>> soup.select('div[style="display: flex"]')
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "/usr/local/lib/python3.4/dist-packages/bs4/element.py", line 1313, in select
    'Unsupported or invalid CSS selector: "%s"' % token)
ValueError: Unsupported or invalid CSS selector: "flex"]"

>>> soup.select('div[style="display:flex"]')
[<div style="display:flex">
<div class="half" style="font-size: 0.8em;width: 33%;"> apple </div>
<div class="half" style="font-size: 0.8em;text-align: center;width: 28%;"> peach </div>
<div class="half" style="font-size: 0.8em;text-align: right;width: 33%;" title="nofruit"> cucumber </div>
</div>]

不幸的是，空间是通常的风格，所以这可能根本不会让你走得太远！

【讨论】：

有趣的观察！谢谢。