总结下常用的nth-child选择符

在 CSS 中，nth-child 选择符用于选择某个元素的第 n 个子元素。它可以用来实现一些有趣的效果，比如隔行变色、选择某个范围内的子元素等。本文将详细讲解 nth-child 选择符的常用方法和示例。

常用的 `nth-child` 选择符

1. `:nth-child(n)`

:nth-child(n) 选择符用于选择某个元素的第 n 个子元素。其中，n 可以是一个正整数、一个关键字（如 even、odd）或一个公式（如 2n+1）。例如：

li:nth-child(2) {
  color: red;
}

上述代码中，选择了 li 元素的第二个子元素，并将其文字颜色设置为红色。

2. `:nth-last-child(n)`

:nth-last-child(n) 选择符用于选择某个元素的倒数第 n 个子元素。例如：

li:nth-last-child(2) {
  color: blue;
}

上述代码中，选择了 li 元素的倒数第二个子元素，并将其文字颜色设置为蓝色。

3. `:nth-of-type(n)`

:nth-of-type(n) 选择符用于选择某个元素的第 n 个指定类型的子元素。例如：

p:nth-of-type(2) {
  color: green;
}

上述代码中，选择了 p 元素的第二个 p 子元素，并将其文字颜色设置为绿色。

4. `:nth-last-of-type(n)`

:nth-last-of-type(n) 选择符用于选择某个元素的倒数第 n 个指定类型的子元素。例如：

p:nth-last-of-type(2) {
  color: purple;
}

上述代码中，选择了 p 元素的倒数第二个 p 子元素，并将其文字颜色设置为紫色。

5. `:first-child`

:first-child 选择符用于选择某个元素的第一个子元素。例如：

li:first-child {
  font-weight: bold;
}

上述代码中，选择了 li 元素的第一个子元素，并将其文字加粗。

6. `:last-child`

:last-child 选择符用于选择某个元素的最后一个子元素。例如：

li:last-child {
  font-style: italic;
}

上述代码中，选择了 li 元素的最后一个子元素，并将其文字设置为斜体。

示例说明

下面是两个示例说明，分别是使用 nth-child 选择符实现隔行变色和选择某个范围内的子元素的示例。

示例一：使用 `nth-child` 选择符实现隔行变色

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Nth-child Demo</title>
  <style>
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bob</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Alice</td>
      <td>Johnson</td>
    </tr>
  </table>
</body>
</html>

上述代码中，使用了 nth-child 选择符实现了隔行变色的效果。选择了表格 tr 元素的偶数行，并将其背景颜色设置为 #f2f2f2。

示例二：使用 `nth-child` 选择符选择某个范围内的子元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Nth-child Demo</title>
  <style>
    li:nth-child(n+3):nth-child(-n+7) {
      color: red;
    }
  </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</body>
</html>

上述代码中，使用了 nth-child 选择符选择了 ul 元素中第 3 到第 7 个子元素，并将其文字颜色设置为红色。其中，n+3 表示从第 3 个子元素开始选择，-n+7 表示选择到第 7 个子元素为止。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：总结下常用的nth-child选择符 - Python技术站

总结下常用的nth-child选择符

常用的 nth-child 选择符

1. :nth-child(n)

2. :nth-last-child(n)

3. :nth-of-type(n)

4. :nth-last-of-type(n)

5. :first-child

6. :last-child