css选择器:nth-of-type的用法

Question

有这样一段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)

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

Answer 1

#app > .dialog:last-child

Answer 2

就#app>.dialog:nth-child(3)就好了呀，伪类还换花样良心不会痛么？
（E:nth-of-type(n)是给标签类型用的，你看这一排全div，没的玩啊）

Answer 3

如果你的foot盒子里面还有一个dialog，你要如何才能这么用css选择器花式获取。。你现在情况是没有，所以能在app下用nth找。既然是css和html，自己写自己知道结构，就没必要花这么大精神绕来绕呀。。直接点不好嘛