为嵌套 CSS 选择器组合 (AND) 多个条件的正确方法是什么

Question

我需要指定我想要的(<b>19</b>等(是同时的

1. 在class="elem"和class="main"内(降序CSS组合空间(
2. 类="数字"的直接子级(CSS>直接子运算器(>类="numbers_wrapper">类="容器清除">

如何将所有这 5 个条件结合起来的正确方法是什么？

我需要提取此信息

                <b>19</b>
                <b>12</b>
                <b>14</b>
                <b>23</b>
                <b>10</b>

从网页中间的这种模式：

<div class="elem">
<div class="main">
    <div class="draw_date" title="08.04.2018 21:00">08.04.2018 21:00</div>
    <div class="draw">
        <a href="/5x36plus/archive/8277">8277</a>
    </div>

    <div class="numbers">
        <div class="numbers_wrapper">
            <div class="container cleared">
                <b>19</b>
                <b>12</b>
                <b>14</b>
                <b>23</b>
                <b>10</b>
                <b class="extra">02</b>
            </div>
        </div>

        <div class="controls">
            <a class="no_visited iconic nonunderline" title="Проверить билет"
                href="/5x36plus/check_bulletin">⚲</a>
        </div>
    </div>
    <div class="prize  ">
        <div class="jackpot_wrapper">
            <span></span>
            <span>3000000
            </span>
        </div>
        <div class="jackpot_wrapper">
            <span></span>
            <span>3437960
            </span>
        </div>
    </div>
</div>

我的猜测是否正确？

div.elem > div.main div.numbers > div.numbers_wrapper > div.container.cleared b

附言我正在使用 Jsoup 网页抓取库进行 java(就像中间的这里一样(，如果我正确指定目标 CSS 选择器组合，它会从网页中获取信息。

Answer 1

是的，这是绝对正确的。但是，只要您以不同的方式定义类名，您也可以简单地将css描述为.cleared b{}。

div.elem > div.main div.numbers > div.numbers_wrapper > div.container.cleared b{color: red;}

<div class="elem">
<div class="main">
    <div class="draw_date" title="08.04.2018 21:00">08.04.2018 21:00</div>
    <div class="draw">
        <a href="/5x36plus/archive/8277">8277</a>
    </div>
    <div class="numbers">
        <div class="numbers_wrapper">
            <div class="container cleared">
                <b>19</b>
                <b>12</b>
                <b>14</b>
                <b>23</b>
                <b>10</b>
                <b class="extra">02</b>
            </div>
        </div>
        <div class="controls">
            <a class="no_visited iconic nonunderline" title="Проверить билет"
                href="/5x36plus/check_bulletin">⚲</a>
        </div>
    </div>
    <div class="prize  ">
        <div class="jackpot_wrapper">
            <span></span>
            <span>3000000
            </span>
        </div>
        <div class="jackpot_wrapper">
            <span></span>
            <span>3437960
            </span>
        </div>
    </div>
</div>