p:first-child { background-color: red; } /* 在每一層中的第一個<p>, 並且它是這一層中的第一個標籤 */

p:first-of-type { background-color: blue; } /* 只要是在每一層中的第一個<p> */

p:nth-child(3) { background-color: red; color:white;} /* 在每一層中的<p>, 並且它是這一層中的第 3 個標籤 */

p:nth-of-type(5) { background-color: blue; color:white;} /* 每一層中的第 5 個<p> */

p:nth-of-type(odd) { background-color: pink; }
p:nth-of-type(even) { background-color: palegreen; } /* odd負責選取奇數, even負責選取偶數 */

.abc:nth-of-type(2) { color:red; } /* 符合以下條件：條件1.類別名稱為abc, 條件2.同一層次同樣標籤的第2個 */

.abc:last-of-type { color:red; } /* 符合以下條件：條件1.類別名稱為abc, 條件2.同一層次同樣標籤的最後一個 */

<h1>測試相關 -child 與 -of-type

<p>1111111111

<p class="abc">2222222222

<p class="abc">3333333333

<p>4444444444

<p>5555555555

<p>6666666666