1

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

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

4

4 回答 4

3

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

ul li:last-child {

}

演示

或者，如果您想为每个唯一类的最后一个孩子设置比您需要的样式，而last-child不是在这里工作，您需要使用nth-of-type替代或类似的公式

演示

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

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

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

于 2013-05-15T11:15:56.923 回答
1

First of all you're missing the point in front of your classnames, but anyway this wouldn't solve your problem. As you seem to generate your list programmatically , I would suggest adding a class to each last item with a certain class. Or alternatively use Javascript, which you don't want to...

于 2013-05-15T11:20:26.293 回答
1

假设添加一些额外的类来指定最后一个元素或使用 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/

于 2013-05-15T11:41:51.583 回答
0

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

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

我认为这就是为什么你没有得到输出

于 2013-05-15T11:19:21.703 回答