所有選擇器

選擇器	用法
id選擇器	#myid
類選擇器	.myclassname
標簽選擇器	div,h1,p
相鄰選擇器	h1+p
子選擇器	ul > li
后代選擇器	li a
通配符選擇器	*
屬性選擇器	a[rel=“external”]
偽類選擇器	a:hover, li:nth-child

偽類選擇器

在CSS3中新增了一個結構偽類選擇器，它能用更加簡潔的代碼，實現我們的某些需求。

定義：結構偽類選擇器主要根據的是文檔的結構來選擇元素，常常用在根據父級選擇器選出某些想要的子元素。

主要語法如下：

編號	語法	含義
1	E:first-child	匹配父元素中的第一個子元素E
2	E:last-child	匹配父元素中最后一個E元素
3	E:nth-child(n)	匹配父元素中的第n個子元素E
4	E:first-of-type	指定類型E的第一個
5	E:last-of-type	指定類型E的最后一個
6	E:nth-of-type(n)	指定類型E的第n個

區別(:nth-child(n) 和 :nth-of-type(n))

:nth-child(n) 和 :nth-of-type(n) 都是 CSS 中的偽類選擇器，用于根據它們在父元素中的位置來選擇特定的元素。然而，它們之間有一個關鍵的區別：
:nth-child(n)
這個選擇器會選擇父元素的第 n 個子元素，無論子元素的類型是什么。它根據元素在父元素中的位置來選擇，而不考慮元素的類型。這意味著如果一個父元素有多個不同類型的子元素（例如 div, p, span），:nth-child(n) 會選擇第 n 個出現的子元素，無論它的具體類型。
:nth-of-type(n)
相比之下，:nth-of-type(n) 選擇器會根據元素的類型來選擇特定位置的子元素。它只計算與目標元素相同類型的兄弟元素，并選擇其中的第 n 個。例如，如果你想選擇所有 p 標簽中的第二個，你將使用 p:nth-of-type(2)，這將跳過任何非 p 類型的兄弟元素。

示例:

<div id="parent"><p>Paragraph 1</p><div>Div 1</div><p>Paragraph 2</p><div>Div 2</div><p>Paragraph 3</p>
</div>

/* 使用 :nth-child(n) */
#parent > *:nth-child(2) {color: red;
}/* 使用 :nth-of-type(n) */
#parent > p:nth-of-type(2) {color: blue;
}

在上述示例中：
*:nth-child(2) 將選擇 #parent 內部的第二個子元素，這里是 div（“Div 1”），并將其文本顏色設置為紅色。
p:nth-of-type(2) 將選擇 #parent 內部的第二個

元素（“Paragraph 2”），并將其文本顏色設置為藍色。
總結來說，:nth-child(n) 關注位置，而 :nth-of-type(n) 關注類型和位置。在實際應用中，選擇合適的選擇器取決于你想要根據元素的類型還是單純的位置來選擇元素。