Question

我想定位一个链式类的最后一项。通过这个，我的意思是每个项目可能有一个entry类，如果两个主要项目具有相同的“入口”类，那么它就会被链接。

我怎么能这样做？

<ul class="date">
    <li class="entry"></li>
    <li></li>
    <li class="entry"></li>
    <li class="entry"></li>
    <li class="entry"></li> /* target this item */
    <li></li>
    <li class="entry"></li>
    <li class="entry"></li> /* target this item */
    <li></li>
</ul>


/* targets all chained classes */
.entry + .entry { }

/* targets first of a chained class */
:not(.entry) + .entry { }

Answer 1

如果我没弄错，你需要的是使用.entry:last-of-type { }

修改

对不起，我忘了提到这只有在包含这个类的所有元素属于同一类型时才会起作用（例如，所有元素都是div）。

如果这对您来说是一个问题，您可以使用jQuery轻松解决此问题，如下所示：

var entries = $(".entry"); //here we have an array with all elements that have the class entry var wantedEntry = entries[entries.length - 1]; //last element of the array;

我不确定是否只有使用纯CSS的简单解决方案，所以我希望这会有所帮助。

编辑2

我很抱歉这么慢，但是现在我真的明白了，我认为没有一种纯粹的CSS方式来实现你想要的。同样，我通过jQuery编码了解了一些可能的解决方案，但由于我不知道jQuery是否是一个选项，我不会打扰你。

Answer 2

我认为最好的办法是将这些列表项分解为单独的列表。

<ul class="date">
    <li class="entry"></li>
</ul>
<ul>
  <li class="entry"></li>
  <li class="entry"></li>
  <li class="entry"></li> /* target this item */
</ul>
<ul>
  <li class="entry"></li>
  <li class="entry"></li> /* target this item */
</ul>

CSS：

.entry:last-child{
  background: red;
}

示例：http://jsbin.com/pamivosa/1/edit?html,css,output

Answer 3

尚未能通过CSS找到方法，但使用jQuery完成了我想要的工作。

$('.date li').each(function() {

    var self = $(this);
    if(self.hasClass('entry') && self.next().hasClass('entry'))
        self.addClass('rightborder').next().addClass('leftborder');

});

.rightborder {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.leftborder {           
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

Fiddle

选择链式课程的最后一项？

3 个答案: