CSS最后一个|极客教程

CSS最后一个

在CSS中，我们经常会遇到需要对列表、元素、图片等进行样式设置的情况。有时候我们需要选择元素列表中的最后一个元素，并对其进行特殊样式设置。在这种情况下，我们可以使用last-of-type伪类或者nth-child选择器来实现对最后一个元素的样式设置。

使用`last-of-type`

last-of-type伪类可以选择父元素下的最后一个指定类型的子元素。要使用这个伪类，首先要确定父元素以及子元素的类型。比如我们有一个ul列表，其中有多个li元素，我们想要对最后一个li元素进行样式设置，可以这样做：

<!DOCTYPE html>
<html>
<head>
    <style>
        ul li:last-of-type {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>第一个元素</li>
        <li>第二个元素</li>
        <li>第三个元素</li>
    </ul>
</body>
</html>

在这个示例中，我们使用了li:last-of-type选择器来选择ul下的最后一个li元素，并将其文本颜色设为红色。当页面加载时，第三个元素的文本颜色会变为红色。

使用`nth-child`

除了last-of-type伪类，我们还可以使用nth-child选择器来选择最后一个元素。nth-child选择器可以选择父元素下指定位置的子元素。如果我们想要选取最后一个元素，可以这样使用：

<!DOCTYPE html>
<html>
<head>
    <style>
        ul li:nth-child(n):last-child {
            color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>第一个元素</li>
        <li>第二个元素</li>
        <li>第三个元素</li>
    </ul>
</body>
</html>

在这个示例中，我们使用了li:nth-child(n):last-child选择器来选择ul中的最后一个li元素，并将其文本颜色设置为蓝色。当页面加载时，第三个元素的文本颜色会变为蓝色。