CSS :nth-child() 伪类-之路教程

关键字值

odd

表示那些数字位置为奇数的元素（例如 1、3、5、7 等）。

even

表示数字位置为偶数的元素（例如 2、4、6、8 等）。

语法

:nth-child() {
  css declarations;
}

:nth-child 选择器的例子：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p:nth-child(3) {
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>:nth-child selector example</h2>
    <div>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <p>Paragraph 3</p>
      <p>Paragraph 4</p>
    </div>
  </body>
</html>

“odd”和“even”关键字的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p:nth-child(odd) {
        background: #1c87c9;
        color: #eeeeee;
      }
      p:nth-child(even) {
        background: #666666;
        color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
  </body>
</html>

功能符号

<An+B>

表示那些数字位置与模式 An+B 匹配的元素（对于 n 的每个正整数或者零值）。
第一个元素的索引是1，公式中的n从0开始。
A和B的值必须是整数。

CSS :nth-child() 伪类

:nth-child() 伪类根据元素的索引为元素选择和添加样式。

:nth-child() 可以由数字、关键字或者公式指定。

日期：2020-06-02 22:14:39 来源：oir作者：oir

←CSS :not() 伪类

CSS :nth-last-child 伪类→