【CSS】:nth-child和:nth-of-type

田本初2025-01-17 13:23

:nth-child，先根据条件再查找类名，如下例中，先查找奇数元素再满足div

javascript 复制代码

<!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>
    div:nth-child(2n+1) {
      background: #f81;
    }
  </style>

</head>

<body>
  <div>1 - div1</div>
  <span>2 - span1</span>
  <div>3 - div2</div>
  <div>4 - div3</div>
  <span>5 - span2</span>
  <div>6 - div4</div>
</body>

</html>

所以样式如下：

:nth-of-type，先查找类名再查询符合条件的，如下例中，先查找div再满足是奇数div

javascript 复制代码

<!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>
    div:nth-of-type(2n+1) {
      background: #f81;
    }
  </style>

</head>

<body>
  <div>1 - div1</div>
  <span>2 - span1</span>
  <div>3 - div2</div>
  <div>4 - div3</div>
  <span>5 - span2</span>
  <div>6 - div4</div>
</body>

</html>

所以样式如下：