使用：最后一个孩子与类选择器

我想样式最后/第.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

使用：最后一个孩子与类选择器

回答

相关问题