有这样一段html结构：

    <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再去拿到对应的元素。如果#app里面的子节点，孙节点等都含有这个dialog元素的话，那么必须要对页面结构非常的熟悉才能通过nth-child这个伪类去获取元素。

方式二：

我在想把子元素的范围缩小:

    #app > .dialog

在#app元素的子元素中去找，这样就不用考虑一些非dialog元素里面包含dialog元素的情况。接下来我试着继续用伪类去准确定位需要寻找的元素：

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

但是通过这种方式却找不到对应的元素。