有這樣一段html結(jié)構(gòu)：

    <div id="app">
        <div class="header"></div>
        <div class="body">
            <div class="dialog"></div>
        </div>
        <div class="dialog"></div>
        <div class="dialog"></div>
        <div class="foot"></div>
    </div>

如何通過css選擇器直接選取到最后一個class屬性為dialog的元素？

方式一：

    #app .dialog:nth-child(3)

但是感覺這個方法不太靈活，畢竟是獲取的#app元素下所有的.dialog元素，然后通過nth-child再去拿到對應(yīng)的元素。如果#app里面的子節(jié)點，孫節(jié)點等都含有這個dialog元素的話，那么必須要對頁面結(jié)構(gòu)非常的熟悉才能通過nth-child這個偽類去獲取元素。

方式二：

我在想把子元素的范圍縮小:

    #app > .dialog

在#app元素的子元素中去找，這樣就不用考慮一些非dialog元素里面包含dialog元素的情況。接下來我試著繼續(xù)用偽類去準確定位需要尋找的元素：

    #app > .dialog:nth-of-type(2)

但是通過這種方式卻找不到對應(yīng)的元素。