Question

我试图在类的基础上找到last-child并且想要应用一些样式但是使用：last-child选择器它不是按照期望。我有一个限制我不想使用java脚本，因为元素长度不固定我不能使用第n个选择器。

使用过的HTML标记

<ul>
    <li class="a">First</li>
    <li class="a">Second</li>
    <li class="a">Third</li>    
    <li class="b">First</li>
    <li class="b">Second</li>
    <li class="b">Third</li>    
    <li class="c">First</li>
    <li class="c">Second</li>
    <li class="c">Third</li>        
</ul>

使用过的Css

.a{
    color:red;
}
.b{
    color:blue;
}
.c{
    color:green;
}

.a:last-child{
    color:green;
}
.b:last-child{
    color:red;
}
.c:last-child{
    color:blue;
}

如何解决此问题的任何帮助。

Answer 1

如果您尝试定位ul元素的last-child，那么这就足够了

ul li:last-child {

}

Demo

或者，如果您希望为每个唯一班级的最后一个孩子设置的样式超出您的需要而不是last-child在此处不起作用，则需要使用nth-of-type或类似

的公式

Demo

ul li:nth-child(3n+3) { /* This way you don't have to use classes too */
    color: red;
}

注意：如果您动态生成元素而不是现在没有办法选择具有唯一类的元素的last-child。所以你必须使用nth-child，nth-of-type或像我这样的公式提到的

您可以执行此操作的其他方式是，在ul次迭代后以编程方式创建n元素并在循环中使用this selector

Answer 2

首先，你错过了类名前面的观点，但无论如何这都无法解决你的问题。当您似乎以编程方式生成列表时，我建议为每个具有特定类的最后一个项添加一个类。或者使用Javascript，你不想...

Answer 3

假设添加一些额外的类来指定最后一个元素或使用JS更容易。

例如，您可以这样做：

<ul>
    <li class="a ">First</li>
    <li class="a ">Second</li>
    <li class="a last">Third</li>    
    <li class="b">First</li>
    <li class="b">Second</li>
    <li class="b last">Third</li>    
    <li class="c">First</li>
    <li class="c">Second</li>
    <li class="c last">Third</li>        
</ul>

和css：

.a{
    color:red;
}
.b{
    color:blue;
}
.c{
    color:green;
}

.a.last{
    color:green;
}

.b.last{
    color:red;
}

.c.last{
    color:blue;
}

http://jsfiddle.net/ud8KZ/1/

Answer 4

你没有在最后三个css类中使用dot

.a:last-child{
    color:green;
}
.b:last-child{
    color:red;
}
.c:last-child{
    color:blue;
}

我认为这就是你没有获得输出的原因

在last-child上添加一些样式

4 个答案: