在ul中定位第二个孩子

Question

我需要在我的UL中定位第二个孩子.这是我的html代码和样式应用

HTML:

<ul class="latestpost">
    <li class="clearfix">
        <time datetime="2014-10-22T19:33">22<span class="month">Oct</span></time>
        <h4><a href="#" rel="bookmark" title="Title</a></h4>
        <div class="excerpt">
            sometxt...
        </div>
    </li>

    /*I want to target bg of this li below, it is also li of the same ul as first li in my html */
    <li class="clearfix">
        <time datetime="2014-10-22T09:16">22<span class="month">Oct</span></time>
        <h4><a href="#" rel="bookmark" title="Permanent Link to title</a></h4>
        <div class="excerpt">
            sometxt...
        </div>
    </li>
</ul>

CSS:

.latestpost li time {
        background:#d5176f;     
        border-right: 1px solid #d5176f;
        border-bottom: 1px solid #d5176f;
        color:#fff;
}
ul.latestpost li time:nth-child(2) {
        background:red !important;      
        border-right: 1px solid #d5176f;
        border-bottom: 1px solid #d5176f;
        color:#fff !important;
}

苦苦挣扎了一段时间,但我知道这是一个简单的修复.任何建议都是受欢迎的

谢谢!!!

Answer 1

它不是第二个<time>元素,而是<li>你所针对的第二个元素.所以,使用这些规则:

.latestpost li time {
    ...
}
.latestpost li:nth-child(2) time {
    ...
}

旁注:请修复这些破碎的标签