使用 Jsoup 处理 CSS 类名中的空格

Question

我想从这个页面中选择一些超市产品信息：

http://www.angeloni.com.br/super/index?grupo=15022

为此，我应该选择带有"lstProd " 类的<ul> 标签：

如果类名是"lstProd" 这很容易，但问题是名称末尾的空格。我无法让 Jsoup 处理它。

我尝试了下面的代码和其他方法，但它总是得到一个空列表。

org.jsoup.nodes.Document document = Jsoup.connect("http://www.angeloni.com.br/super/index?grupo=15022").get();
    org.jsoup.select.Elements list = doc.select("ul.lstProd  ");

我想从html页面获取的代码sn-p：

<ul class="lstProd  ">
    <li>
        <span class="cod">CÓD. 1341372</span>
        <span class="lnkImgProd">
            <a href="/super/produto?grupo=15022&amp;idProduto=1341372">
                <img src="http://assets.angeloni.com.br/files/images/7/1B/C6/1341372_1_V.jpg" width="120" height="120"
                     alt="Creme Dental SORRISO Super Refrescante Tubo 90g">
            </a>
                    </span>
        <div class="RgtDetProd">
            <div class="boxInfoProd">
                <span class="descr">
                    <a href="/super/produto?grupo=15022&amp;idProduto=1341372">Creme Dental SORRISO Super Refrescante
                        Tubo 90g</a>

                                    </span>

                <ul class="lstProdFlags after">
                </ul>
            </div>
...

Answer 1

我认为您面临两个完全不同的问题：

1. Jsoup 不会加载您认为它加载的站点。您指定的网站通过 JavaScript 呈现其内容，并在通过 AJAX 加载初始页面后加载一些内容。 JSoup 无法处理这个问题。您要么需要调查 AJAX 调用并直接使用 Jsoup 获取它们，要么使用 selenium webdriver 之类的东西在真实的浏览器中获取页面，这将按照您的预期呈现所有内容。

2. CSS 类名不能包含实际用途的空格¹。在 HTML 中，空格用作类名之间的分隔符。因此<ul class="lstProd "> 与<ul class="lstProd"> 相同。然而，在 CSS 选择器中，类名由 .className 指定，即点后跟类名。你可以像这样连接几个类：element.select(".className1.className2")

¹ 从技术上讲，您可以在 CSS 类中放置空格，但您需要使用 '\ ' 转义它们。见https://mathiasbynens.be/notes/css-escapes或Which characters are valid in CSS class names/selectors?

编辑：更准确的 CSS 类名

Answer 2

CSS 类名 CAN 包含空格。
并且<ul class="lstProd "> 与<ul class="lstProd">不相同。

我可以看到您有多个 <ul> 具有相同的类名。
检查或遍历此类元素的更好方法是 nth-child
所以要找到你需要的选择器，你可以使用#abaProd > ul:nth-child(4)
For more details about nth-child