: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），分别表示匹配奇数位置和偶数位置。
