結構偽類選擇器

在CSS中，選擇器是用來選擇HTML文檔中特定元素的一種方式。其中，偽類選擇器是一種特殊的選擇器，用於在選擇元素的基礎上增加特殊的狀態。結構偽類選擇器是偽類選擇器中的一種類型，用於根據元素在文檔中的位置來選擇元素。

一、結構偽類選擇器n

結構偽類選擇器n是CSS3中引入的一種選擇器，它可以選擇指定步長的元素。具體來說，n可以選擇以某個數字為基數，以步長為單位選定一系列元素。

例如，使用:nth-child(n)可以選擇所有元素的第n個子元素，:nth-last-child(n)可以反向選擇所有元素的第n個子元素，:nth-of-type(n)可以選擇所有同種類型元素中的第n個元素，:nth-last-of-type(n)可以反向選擇所有同種類型元素中的第n個元素。

/* 選擇所有ul元素中第偶數個li元素 */
ul li:nth-child(even) {
  /* 樣式 */
}

/* 選擇所有表格行中的偶數行 */
tr:nth-child(even) {
  /* 樣式 */
}

二、結構偽類選擇器只能選親兒子

結構偽類選擇器只能選親兒子，不能選擇孫子輩及以下後代元素。這意味着，使用結構偽類選擇器時需要考慮元素的直接父元素。

例如，使用:nth-of-type(n)時，只會在同種類型的元素中選擇第n個元素，而不會選擇其他類型的元素中的第n個元素。因此，需要結合其父元素的選擇器來精確選擇需要的元素。

/* 選擇父級元素為ul的情況下，所有ul元素中的第二個li元素 */
ul > li:nth-of-type(2) {
  /* 樣式 */
}

三、結構偽類選擇器語法格式

結構偽類選擇器的語法格式是：:nth-X（n）

其中，X可以是child或者of-type，表示選擇子元素或者同種類型的元素，n表示選取的第n個元素，可以是具體的數字，也可以是關鍵字，如odd代表奇數，even代表偶數，可以使用正負號表示偏移量。

特別的，可以使用:nth-last-X來反向選擇元素。

四、結構偽類選擇器的特點

結構偽類選擇器的特點如下：

可以根據元素的位置選擇指定元素
可以選擇同種類型的元素和子元素
只能選擇直接父元素
使用步長和偏移量來進行選擇
語法格式簡單明了

五、結構偽類選擇器的寫法

結構偽類選擇器可以直接在CSS樣式中使用，寫法如下：

/* 選擇直接父元素下的第n個子元素 */
父元素 :nth-child(n) {
  /* 樣式 */
}

/* 選擇同種類型元素中第n個元素 */
元素 :nth-of-type(n) {
  /* 樣式 */
}

/* 反向選擇直接父元素的第n個子元素 */
父元素 :nth-last-child(n) {
  /* 樣式 */
}

/* 反向選擇同種類型元素中的第n個元素 */
元素 :nth-last-of-type(n) {
  /* 樣式 */
}

六、結構偽類選擇器有哪些

結構偽類選擇器主要有以下幾種：

:nth-child(n)——選擇直接父元素下的第n個子元素。
:nth-last-child(n)——反向選擇直接父元素下的第n個子元素。
:nth-of-type(n)——選擇同種類型元素中的第n個元素。
:nth-last-of-type(n)——反向選擇同種類型元素中的第n個元素。

七、結構偽類選擇器用法

結構偽類選擇器主要用於選擇具有特定位置關係的元素，常見的用法如下：

選擇表格中的行或列
選擇列表中的偶數或奇數項
選擇圖庫中的每一行或每一列
選擇表格中第一列或者最後一列

八、結構偽類選擇器倒數

結構偽類選擇器還可以選擇倒數的元素，用法與正數相似，只需在選擇器前加上last-即可。

/* 選擇ul元素中倒數第2個li元素 */
ul li:nth-last-child(2) {
  /* 樣式 */
}

九、結構偽類選擇器的格式

結構偽類選擇器的格式如下：

:nth-X(n)