css セレクタ 子要素 番目

 

精准定位：CSS 选择器中子元素的魔法 ":nth-child"

掌握 CSS 选择器 ":nth-child"，精准选择 HTML 元素中的子元素，实现网页样式的灵活控制。本文将详细介绍 ":nth-child" 的语法、用法，并结合实例代码，带您轻松掌握这一强大工具。

CSS 子元素选择器：精准定位目标元素

简介

CSS 选择器是网页样式设计的基石，它允许开发者精准地选择 HTML 元素并为其应用样式。子元素选择器作为 CSS 选择器家族中的一员，专门用于选择指定元素的子元素，实现更细粒度的样式控制。

子元素选择器类型

直接子元素选择器（>）

">" 符号用于选择指定元素的直接子元素，不包含更深层级的后代元素。


<div class="parent">
  <p>我是直接子元素</p>
  <div>
    <p>我是孙子元素</p>
  </div>
</div>


.parent > p {
  color: blue;
}

上述代码中，只有 class 为 "parent" 的 div 元素的直接子元素 p 会应用蓝色样式，而孙子元素 p 则不受影响。

:nth-child(n) 选择器

":nth-child(n)" 选择器则更为强大，它可以根据元素在其父元素中的位置来选择元素。

语法解释

":nth-child(n)" 的语法结构如下：


element:nth-child(n)
  • element: 要选择的元素类型。
  • n: 表示元素的位置，可以是整数、关键字或表达式。
n 的取值类型
  • 整数 n: 选择第 n 个子元素。例如，p:nth-child(2) 会选择第二个 p 元素。 
    
      <p>第一个子元素</p>
      <p>第二个子元素</p>
      <p>第三个子元素</p>
    
    
      p:nth-child(2) {
        color: red;
      }
  • 关键字 (even/odd): 选择偶数/奇数子元素。例如，li:nth-child(even) 会选择所有偶数的 li 元素。 
    
      <ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
        <li>第四项</li>
      </ul>
    
    
      li:nth-child(even) {
        background-color: lightgray;
      }
  • 表达式 (an+b): 通过表达式可以选择更复杂的序列。
    • a: 表示步长，决定选择元素的间隔。
    • b: 表示偏移量，决定从哪个位置开始选择。

    例如，tr:nth-child(2n+1) 会选择所有奇数的行，li:nth-child(3n) 会选择每隔三个出现的 li 元素。

    
      <table>
        <tr>
          <td>1</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
          <td>6</td>
        </tr>
      </table>
    
    
      tr:nth-child(2n+1) {
        background-color: lightblue;
      }

:nth-child 选择器的应用场景

列表样式控制

使用 ":nth-child" 可以轻松实现列表项的交替颜色、首尾元素特殊样式等效果。


li:nth-child(even) {
  background-color: #f2f2f2;
}
li:first-child {
  font-weight: bold;
}
li:last-child {
  font-style: italic;
}

表格样式控制

":nth-child" 在表格样式控制中也非常实用，例如实现斑马线效果、高亮显示特定行/列等。


tr:nth-child(even) {
  background-color: #f2f2f2;
}
td:nth-child(2) {
  color: red;
}

网格布局

在网格布局中，":nth-child" 可以帮助我们选择特定的网格项，实现灵活的布局效果。


.grid-container > div:nth-child(3n) {
  grid-column: span 2;
}

:nth-child 选择器的注意事项

:nth-child(n) 选择的是兄弟元素中的位置关系，而不是元素类型。

这意味着 ":nth-child(n)" 会选中所有类型的元素，只要它们在父元素中的位置符合条件。如果需要根据元素类型选择，可以使用 ":nth-of-type(n)" 选择器。


<div>
  <p>段落 1</p>
  <span>span 1</span>
  <p>段落 2</p>
</div>


div :nth-child(2) { /* 会选择 span 1 */
  color: red;
}

与其他选择器结合使用

":nth-child" 可以与其他 CSS 选择器结合使用，实现更精确的元素选择。


.special-list li:nth-child(even) {
  background-color: yellow;
}

总结

":nth-child" 选择器是 CSS 中一个强大而灵活的工具，它可以根据元素在父元素中的位置进行选择，帮助开发者实现各种复杂的样式效果。掌握 ":nth-child" 的语法和用法，可以让我们更游刃有余地控制网页的样式，打造出更精美、更具吸引力的网页。

QA

1. ":nth-child" 和 ":nth-of-type" 有什么区别？

":nth-child" 选择的是兄弟元素中的位置关系，而 ":nth-of-type" 选择的是指定类型元素中的位置关系。

2. 如何选择最后一个子元素？

可以使用 ":last-child" 选择器选择最后一个子元素。

3. ":nth-child" 可以与其他选择器一起使用吗？

可以，":nth-child" 可以与其他选择器一起使用，例如类选择器、id 选择器等，以实现更精确的元素选择。

その他の参考記事:CSS セレクタについて