带有类选择器的CSS last-child

时间:2013-11-30 11:48:50

标签: css css-selectors

http://jsfiddle.net/SJyV3/

HTML:

<div id="parent">
    <div class="tt">tt</div>
    <div class="tt">tt</div>
    <div class="huh">huh</div>
</div>

CSS:

.tt:nth-child(2) {
    color:blue;
}
#parent .tt:last-child {
    color:red;
}

是否可以选择提供类的最后一个子元素?

2 个答案:

答案 0 :(得分:2)

 div.tt:last-child {
    background:yellow;
}

实际选择最后一个孩子。但是,如果它不是其父级中的最后一个实例,则它不会选择该类的最后一个实例。

因此您必须将HTML更改为:

<div id="parent">
    <div id="ttwrppaer">
        <div class="tt">tt</div>
        <div class="tt">tt</div>
        <div class="tt">tt</div>
    </div>
    <div class="hhhd">tt</div>
</div>

这是demo

答案 1 :(得分:0)

我认为,您正在尝试在父元素(#parent)div元素中选择last-child div。所以你需要选择它。

试试这个: 的 HTML:

<div id="parent">
    <div class="tt">tt</div>
    <div class="tt">tt</div>
    <div class="huh">huh</div>
</div>

CSS:

.tt:nth-child(2) {
    color:blue;
}
div div:last-of-type {
    color:red;
}

Try this 1

OR

.tt:nth-child(2) {
    color:blue;
}
div div:last-child {
    color:red;
}

Try this 2