[分享]css列表最后一个

在网页的布局中，经常需要使用到列表来展示一些信息。而在样式设计中，CSS为我们提供了一些可以让列表更加美观的属性。其中一个就是针对列表中最后一个进行样式的设置。/ 给最后一个列表元素添加样式 / li...

在网页的布局中，经常需要使用到列表来展示一些信息。而在样式设计中，CSS为我们提供了一些可以让列表更加美观的属性。其中一个就是针对列表中最后一个进行样式的设置。

/* 给最后一个列表元素添加样式 */
li:last-child {
    background-color: #f2f2f2;
    color: #666666;
    font-weight: bold;
} 

在上面的代码中，我们使用了:last-child伪类选择器来选中了最后一个li元素并进行样式设置。这个伪类选择器可以选中任何元素的最后一个子元素，无论是什么类型。

比如，我们也可以使用:nth-last-child(n)来选中最后的第n个元素。

/* 给最后的第三个列表元素添加样式 */
li:nth-last-child(3) {
    background-color: #f2f2f2;
    color: #666666;
    font-weight: bold;
} 

除了上面提到的:last-child和:nth-last-child(n)伪类选择器外，还有一个:last-of-type选择器，它可以选中同类型元素中的最后一个元素，而不是子元素。

/* 给最后一个p元素添加样式 */
p:last-of-type {
    font-size: 20px;
    color: blue;
} 

通过使用以上伪类选择器，我们可以轻松地为列表元素的最后一个，或其他元素的最后一个，进行样式的设置，让界面更加美观。