:nth-child(n)
:nth-last-child(n)
:first-child
:last-child
:only-child
:nth-of-type(n)
:nth-last-of-type(n)
:first-of-type
:last-of-type
:only-of-type
:root
:empty
- :nth-child(n)
<style>
h4:nth-child(1) {background-color: red}
h5:nth-child(1) {background-color: green}
</style>
<body>
<h6>0-0</h6>
<div>
<h5>1-0</h5>
<h4>1-1</h4>
<h4>1-2</h4>
<h4>1-3</h4>
<h5>1-4</h5>
</div>
</body>
匹配第n個元素，n是從1開始的，而不是0，位置不區分同級元素類型。
- :nth-last-child(n)
<style>
h4:nth-last-child(1) {background-color: red}
h5:nth-last-child(1) {background-color: green}
</style>
<body>
<h6>0-0</h6>
<div>
<h5>1-0</h5>
<h4>1-1</h4>
<h4>1-2</h4>
<h4>1-3</h4>
<h5>1-4</h5>
</div>
</body>
倒敘地匹配第n個元素，n是從1開始的，而不是0，位置不區分同級元素類型。
:first-child 等同于 :nth-child(1)。
:last-child 等同于 :nth-last-child(1)。
:only-child
<style>
h4:only-child {background-color: green}
</style>
<body>
<div>
<h5>1-0</h5>
<h4>1-1</h4>
</div>
<div>
<h4>2-0</h4>
</div>
</body>
僅當元素在其父元素中是唯一一個子元素時，才匹配該子元素，位置不區分同級元素類型。
- :nth-of-type(n)
<style>
h5:nth-of-type(1) {background-color: red}
h4:nth-of-type(1) {background-color: green}
</style>
<body>
<h6>0-0</h6>
<div>
<h5>1-0</h5>
<h4>1-1</h4>
<h4>1-2</h4>
<h4>1-3</h4>
<h5>1-4</h5>
</div>
</body>
匹配元素在同級而且相同元素中第n次出現的元素，n是從1開始的，而不是0。
image.png
- :nth-last-of-type(n)
<style>
h5:nth-last-of-type(1) {background-color: red}
h4:nth-last-of-type(1) {background-color: green}
</style>
<body>
<h6>0-0</h6>
<div>
<h5>1-0</h5>
<h4>1-1</h4>
<h4>1-2</h4>
<h4>1-3</h4>
<h5>1-4</h5>
</div>
</body>
倒敘地匹配元素在同級而且相同元素中第n次出現的元素，n是從1開始的，而不是0。
:first-of-type 等同于 :nth-of-type(1)。
:last-of-type 等同于 :nth-last-of-type(1) 。
:only-of-type
<style>
h4:only-of-type {background-color: green}
</style>
<body>
<div>
<h5>1-0</h5>
<h4>1-1</h4>
</div>
<div>
<h4>2-0</h4>
</div>
</body>
僅當該元素在其父元素中僅有唯一一個該元素時，才匹配該元素。
- :root
<style>
:root {background-color: green}
h4:root {background-color: red}
</style>
<body>
<h6>0-0</h6>
<div>
<h5>1-0</h5>
<h4>1-1</h4>
<h4>1-2</h4>
<h4>1-3</h4>
<h5>1-4</h5>
</div>
</body>
:root始終指向<html>標簽，不要試圖在選擇器前面加上元素，像這樣h4:root，它的意思是當前頁面的頂級元素并且該元素為h4標簽時匹配。
- :empty
<style>
div:empty {background-color: green; height: 20px;}
</style>
<body>
<div></div>
<div>
<h4>2-0</h4>
</div>
<div>3-0</div>
</body>
僅當元素內部沒有子元素和文本時，匹配該元素。
總結
-
...-child與...-of-type的區別：-child統計時不論元素種類，只論元素位置；-of-type統計時會先區分元素種類，再查詢當前種類下的位置。 -
n可以是正整數（1、2、3），表示第一、第二、第三位；可以是n本身（n），表示匹配所有位置；可以是n和算術（2n-1），表示匹配基數或者更靈活的；也可以是字符串odd和even（odd、even），分別表示匹配奇數位置和偶數位置。
