Question

是否可以使用CSS？

将下面的文本“突出显示我”定位到两个容器中？

<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，而最后一个元素是.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/

Answer 2

看起来最后一个孩子总是more的班级。您想要选择上方的div（类product）和.product内的.more。所以你可以这样做：

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

这样，物品的数量可以是多种多样的。

Demo.

Answer 3

如果可以的话，请尝试将更多内容div分开..像这样 LINK

的CSS：

.more > .product:last-of-type, .content > div.product:last-of-type {
    border: red 1px solid;
}

HTML：

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

CSS选择多个：last-of-type

3 个答案:

Demo.