CSS如何使用:last-child伪类

66次阅读
没有评论

在CSS中,:last-child 伪类匹配其父元素的最后一个子元素。以下是如何在CSS中使用:last-child伪类的步骤:

  1. 选择要应用样式的元素的父元素。
  2. 在选择器中添加:last-child伪类。

例如,要选择最后一个段落元素并更改其颜色,可以使用以下CSS代码:

p:last-child {
  color: red;
}

这将选择包含在其父元素中的最后一个p元素,并将其文本颜色更改为红色。

以下是一个完整的HTML5页面示例,其中包含一个使用:last-child伪类的CSS样式表:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>:last-child Example</title>
  <style>
    /* Select the last child of the body element and change its background color */
    body > *:last-child {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>This is the first paragraph.</p>
  <p>This is the second paragraph.</p>
  <div>This is a div element.</div>
  <p>This is the last paragraph.</p>
</body>
</html>

在这个例子中,我们使用CSS选择器 body > *:last-child 选择了body元素的最后一个子元素,并将其背景颜色更改为黄色。在这种情况下,它是页面中的最后一个段落元素。

正文完
 
评论(没有评论)