CSS3新增结构伪类选择器 - 选择第n个元素、nth-child

听海边涛声

于 2024-08-26 16:48:02 发布

阅读量203

点赞数 2

文章标签： css3 前端

本文链接：https://blog.csdn.net/panghuangang/article/details/141562160

版权

结构伪类选择器说明

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择里面的子元素。

E:first-child：匹配父元素中的第一个子元素E。
E:last-child：匹配父元素中的最后一个子元素E。
E:nth-child(n)：匹配父元素中的第n个子元素E。
E:first-of-type：指定类型E的第一个。
E:nth-of-type(n)：指定类型E的第n个。

nth-child(n)选择某个父元素的一个或多个特定的子元素：

n可以是数字、关键字、或公式。
如果n是数字，就是选择第 n 个子元素，里面数字从1开始。
n可以是关键字：even 偶数，odd 奇数。
n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）。

公式	数值
2n	偶数
2n+1	奇数
5n	5 10 15 …
n+5	从第5个开始（包括第5个）到最后
-n+5	前5个（包括第5个）

示例

first-child：选择第父级下面的第1个子元素

在这里插入图片描述

last-child：选择第父级下面的最后1个子元素

在这里插入图片描述

nth-child(2)：选择第2个字元素

在这里插入图片描述

nth-child(even)和nth-child(odd)：分别选择所有偶数的子元素、奇数的子元素

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 把所有的偶数的孩子选出来 */
    ul li:nth-child(even) {
      background-color: #ccc;
    }

    /* 把所有的奇数的孩子选出来 */
    ul li:nth-child(odd) {
      background-color: green;
    }
  </style>
</head>

<body>
  <ul>
    <li>第1个小li</li>
    <li>第2个小li</li>
    <li>第3个小li</li>
    <li>第4个小li</li>
    <li>第5个小li</li>
    <li>第6个小li</li>
    <li>第7个小li</li>
    <li>第8个小li</li>
  </ul>
</body>

</html>