css3 选择器：结构伪类选择器（三）

作者: rayman_v | 来源:发表于2017-06-13 17:11 被阅读59次

CSS进阶知识点--CSS3伪类选择器和伪元素
CSS3属性选择器
css3-1
CSS 3 选择器
CSS3笔记（一）选择器
web-6
CSS3 积累（2）之结构伪类选择器
HTML5和CSS3新增内容
第2章 CSS3选择器-4
CSS3学习

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