选择链接类的最后一项？

我想定位链接类的最后一项。通过这个，我的意思是每个项目可能有一个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 { }

来源

2014-02-21 ditto

会不会有永远是'

'你想指定的应用程式后？ – Barmar

是的，会有。 – ditto

请注意，'：not（.entry）+ .entry {}'不一定针对“链接类的第一个”，因为它也会针对该类的“单独条目”（非链接），即_not该组的第一个孩子。 – ScottS

如果我没有记错的话，你需要的是使用.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一个普通的解决方案，所以我希望这帮助。

EDIT 2

我的速度比较慢遗憾，但现在我真的明白你的意思，我不认为这是一个纯CSS的方式来实现你想要什么。再次，我通过jQuery编码了解了一些可能的解决方案，但由于我不知道jQuery是否是一种选择，我不会因此而打扰您。

来源

2014-02-21 02:35:17 lucasnadalutti

这将不会选择他标记为“定位此项目”的第一个。 – Barmar

哦，那是正确的，我会再次编辑我的答案，谢谢指出。 – lucasnadalutti

我认为你最好的选择是将这些列表项分成不同的列表。

<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

来源

2014-02-21 02:48:04 busyPixels

我无法编辑HTML输出。 – ditto

一直无法推测的方式来做到这一点通过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

来源

2014-02-21 19:03:33 ditto

选择链接类的最后一项？

回答

相关问题