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 {
    ...
}

旁注：请修复这些损坏的标签

Answer 2

要定位您将使用的ul的第二个孩子：

ul.latestpost li:nth-child(2) {

}

但是看看你当前的CSS，我想你想要在第二个time中定位li：

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

}

Answer 3

我相信你的选择器是错误的。目前，您正在寻找每个time中的第二个li元素。由于每个li元素只包含一个time元素，因此无需应用该样式。如果您尝试在示例中选择第二个time元素，我相信您的选择器需要如下所示

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

在ul中定位第二个孩子

3 个答案: