CSS 选择多个 :last-of-type

Question

是否可以仅使用 CSS 将下面的文本“突出显示我”定位到两个容器？<​​/p>

<div class="content">
    <div class="product">Bla</div>    
    <div class="product">Bla</div>    
    <div class="product">Highlight me!</div>
    <div class="more">
        <div class="product">Bla</div>    
        <div class="product">Bla</div>    
        <div class="product">Highlight me!</div>
    </div>
</div>

我已经尝试使用 .product:last-of-type 但这只针对嵌套元素。

重要:我不想使用 :nth-child 定位“突出显示我”容器，因为数量可能会有所不同。

jsfiddle

Answer 1

:last-of-type 将只选择找到的最后一个元素。

这里的最后一个元素是 .more，more 里面是最后一个 .product。

.more 与选择器不匹配，对于 .product 类来说也是如此

您可以使用:.product:nth-child(3) {}

http://jsfiddle.net/ds4LY/1/

---

另一种使用方法，将匹配 last-of-type ，是使用 nth-last-of-type http://jsfiddle.net/ds4LY/3/

.content .product:last-of-type,
.content > div:nth-last-of-type(2){
    border: red 1px solid;
}

---

一些阅读:http://css-tricks.com/almanac/selectors/n/nth-last-of-type/