Question

我想更改最后一个嵌套元素的背景颜色。我正在使用以下css但它无法正常工作

.cd-timeline > .year-wrapper > .cd-timeline-block:last-of-type{ 
    background-color:red;
}

我也试过

#cd-timeline .year-wrapper  .cd-timeline-block:last-of-type{ 
    background-color:red;
}

我做错了什么我们可以将last-of-type元素与类

一起使用

小提琴http://fiddle.jshell.net/shfh0x63/2/

<div class="timeline-wrapper">
    <div class="cd-container" id="cd-timeline">
        <div class="year-wrapper">
            <div class="cd-timeline-block">1</div>
            <div class="cd-timeline-block">2</div>
            <div class="cd-timeline-block">3</div>
        </div>
        <div class="year-wrapper">
            <div class="cd-timeline-block">4</div>
            <div class="cd-timeline-block">5</div>
        </div>
        <div class="year-wrapper">
            <div class="cd-timeline-block">6</div>
            <div class="cd-timeline-block">7</div>
            <div class="cd-timeline-block">8</div>
            <div class="cd-timeline-block">change background color of this only</div>
        </div>
    </div>
</div>

Answer 1

您使用未定义的选择器（.cd-timeline而不是#cd-timeline - 在HTML中您有ID，而不是class）。然后，您还需要将last-of-type添加到.year-wrapper

#cd-timeline > .year-wrapper:last-of-type > .cd-timeline-block:last-of-type{ background-color:red;}
^                           ^^^^^^^^^^^^^

http://fiddle.jshell.net/shfh0x63/3/

Answer 2

这是使用最简单的方法：last-child

（Demo）

.year-wrapper:last-child .cd-timeline-block:last-child {
    background-color: red;
}

我需要使用css更改最后一个嵌套元素的背景

2 个答案: