在最后一个孩子上添加一些样式[重复]答案

【问题标题】：Add some styling on last-child [duplicate]在最后一个孩子上添加一些样式[重复]
【发布时间】：2013-05-09 22:28:12
【问题描述】：

我试图在类的基础上找到 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;
}

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

【问题讨论】：

a:last-child 缺少领先的 . 类选择器。其他人也一样。是不是打错字了？
我认为 OP 要求将样式应用于每个班级的最后一个孩子。
请检查我创建的演示 - jsfiddle.net/WanzY/1 - 它只应用于 c 类

标签： html css

【解决方案1】：

如果你试图定位 ul 元素的最后一个子元素，这就足够了

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;
}

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

您可以这样做的其他方法是，在n 迭代之后以编程方式创建一个ul 元素，并在您的循环中使用this selector

【讨论】：

我认为 OP 想要第二个选项。
希望每隔三个元素应用一些样式。不仅在最后一个元素上。请查看此演示jsfiddle.net/WanzY/1
不能使用 ul li:nth-child(3n+3) { color: red; } 因为元素不固定
@saorabh 我认为last-of-type 应该在这里工作，等等，我会继续努力的
@Mr.Alien 我尝试了 last-of-type 但css没有运气。 :(

【解决方案2】：

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

【讨论】：

+1 是的，仅使用 CSS 是不可能的。这是最简单的解决方案。

【解决方案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/

【讨论】：

【解决方案4】：

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

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

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

【讨论】：