使用：最後一個孩子與類選擇器

我想樣式最後/第.heading。使用：最後一個孩子與類選擇器

<ul> 
    <li class="heading">Hello world</li> 
    <li>Hello world</li> 
    <li>Hello world</li> 
    <li class="heading">Hello world</li> 
    <li>Hello world</li> 
</ul>

無論

ul li.heading:last-child { 
    background: black; 
}

也不

ul li.heading:nth-child(2) { 
    background: black; 
}

爲我工作。爲什麼，以及如何將樣式應用於<li>？似乎僞類選擇器不能與類選擇器一起工作。這是奇怪的，因爲我可以發誓我之前使用過它。

更新：哎呀，完全忘了the jsfiddle。

來源

2011-10-07 Znarkus

我不相信有您可以選擇與這些僞類選擇一個類中的孩子的方式。它總是在列表中的第4個標題，還是它總是您想要樣式化的類.heading的第二個實例？如果總是4，下面的答案應該可以正常工作，儘管你也可以使用n型。 – KryptoniteDove

如果您沒有在標記/語義/ html級別解決此問題，那麼您會讓自己的生活變得困難。使用嵌套'ul's可以讓你做到你想要的CSS2選擇器。 –

你的說法是：「我想風格的最後/秒.heading」

這將意味着你會寫你這樣的代碼：

<ul> 
    <li class="heading">Hello world</li> 
    <li class="heading">Hello world</li> 
    <li class="heading">Hello world</li> 
    <li class="heading">Hello world</li> 
    <li class="heading">Hello world</li> 
</ul>

而CSS：

ul li.heading:last-child { 
    background: black; 
} 
ul li.heading:nth-child(2) { 
    background: black; 
}

否則，與您現有的HTML代碼，你可以這樣寫：

ul li.heading:nth-child(4) { 
    background: black; 
} 
ul li.heading:nth-child(1) { 
    background: black; 
}

我明白你的想法，但是帶有「標題」類的lis不是第二個也不是最後一個孩子。

來源

2011-10-07 13:14:15 Marcus

這是因爲li.heading不是最後一個孩子，也不是第二個孩子。它的ul

第一和第四個孩子試試這個：

ul li.heading:nth-child(4) { 
    background: black; 
}

來源

2011-10-07 13:06:26 Jrod

ul li.heading:nth-last-child(2)

2意味着你知道有多少<李>的是你<李類=「標題」後>在我們的情況下，它是倒數第二。

來源

2014-04-10 14:36:32 boo

使用：最後一個孩子與類選擇器

回答

相關問題