選擇鏈接類的最後一項？

我想定位鏈接類的最後一項。通過這個，我的意思是每個項目可能有一個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

選擇鏈接類的最後一項？

回答

相關問題