CSS如何引用多个div中的最后一个div

Question

我有以下 HTML:

<div class="test">
        <div class="inner">
            <div class="pure-g">
                <div class="pure-u-1-4">
                    <div class="spec__test">
                    </div>
                </div>
                <div class="pure-u-1-4">
                    <div class="spec__test">
                    </div>
                </div>
                <div class="pure-u-1-4">
                    <div class="spec__test">
                    </div>
                </div>
                <div class="pure-u-1-4">
                    <div class="spec__test">
                    </div>
                </div>
            </div>
        </div>
    </div>

我怎样才能使用 CSS 仅引用最后一个 spec__test div？

Answer 1

使用 :last-child

参见:参见:http://www.w3schools.com/cssref/sel_last-child.asp

.pure-g .pure-u-1-4:last-child .spec__test{
  background-color:red;  
}

<div class="test">
        <div class="inner">
            <div class="pure-g">
                <div class="pure-u-1-4">
                    <div class="spec__test">123
                    </div>
                </div>
                <div class="pure-u-1-4">
                    <div class="spec__test">123
                    </div>
                </div>
                <div class="pure-u-1-4">
                    <div class="spec__test">123
                    </div>
                </div>
                <div class="pure-u-1-4">
                    <div class="spec__test">123
                    </div>
                </div>
            </div>
        </div>
    </div>