結合CSS選擇器*與最後一個類型

我想同時使用[href * =「foo」]和：last-of-type。我找不到可用的組合。輸出是這樣的：結合CSS選擇器*與最後一個類型

藝術家名稱類型類型主題主題主題

.tags a[href*="genre"]:last-of-type { margin-bottom: 1rem; }

我想款式上最後的「藝術家」和最後一個「流派」一些底部邊緣。這是一個小提琴：https://jsfiddle.net/40whp0ph/。請注意，藝術家和最後流派的邊緣底部是我想要的，但不是第一流派的邊緣底部。

任何人都可以指出我如何刪除除最後一個流派以外的所有邊緣？

謝謝！

來源

2017-05-25 GodWords

你不能使用：最後一種類型。您將需要修改您的HTML以適合您的使用情況。就像將每種類型的元素放入其自己的容器中，然後爲每個容器的最後一個子元素設計樣式。 – BoltClock

或者你可以保持HTML不變，並使用'+'combinator ... –

該解決方案是完全未予以重視的+組合子。
有了這個，我們可以給某個選擇器一個樣式，然後重置相同選擇器的樣式，如果它直接在之後再次出現。換句話說，只給這個類的第一個元素賦予樣式。

.tags a { display: block; } 
 
.tags a[href*="genre"] { margin-top: 1rem; } 
 
.tags a[href*="genre"] + a[href*="genre"] { margin-top: 0; } 
 
.tags a[href*="topic"] { margin-top: 1rem; } 
 
.tags a[href*="topic"] + a[href*="topic"] { margin-top: 0; }

<div class="tags"> 
 
    <h3>Tags</h3> 
 
    <a href="https://awesomechristianmusic.com/tag/artist-glad/" rel="tag">Artist: Glad</a> 
 
    <a href="https://awesomechristianmusic.com/tag/genre-a-capella/" rel="tag">Genre: A Capella</a> 
 
    <a href="https://awesomechristianmusic.com/tag/genre-hymns/" rel="tag">Genre: Hymns</a> 
 
    <a href="https://awesomechristianmusic.com/tag/topic-faith/" rel="tag">Topic: Faith</a> 
 
    <a href="https://awesomechristianmusic.com/tag/topic-god/" rel="tag">Topic: God</a> 
 
    <a href="https://awesomechristianmusic.com/tag/topic-prayer/" rel="tag">Topic: Prayer</a> 
 
</div>

或者，如果你確信不會有任何東西，除了元素的DIV一樣，你可以縮短這樣的CSS的東西：

.tags a {display: block;} 
.tags a:not([href*="genre"]) + a[href*="genre"], 
.tags a:not([href*="topic"]) + a[href*="topic"] {margin-top: 1rem;}

來源

2017-05-26 06:13:51

啊哈！這是一個非常好的答案。我從來沒有想過使用：不與+ ...有點像貓頭鷹選擇器相反。我將爲未來的項目記住這一點。 – GodWords

結合CSS選擇器*與最後一個類型

回答

相關問題