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>

仅当元素内部没有子元素和文本时,匹配该元素。



总结

  1. ...-child...-of-type的区别:-child统计时不论元素种类,只论元素位置;-of-type统计时会先区分元素种类,再查询当前种类下的位置。
  2. n可以是正整数(1、2、3),表示第一、第二、第三位;可以是n本身(n),表示匹配所有位置;可以是n和算术(2n-1),表示匹配基数或者更灵活的;也可以是字符串oddeven(odd、even),分别表示匹配奇数位置和偶数位置。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • (1). 阴影模糊半径与阴影扩展半径的区别:阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不...
    Leisure_blogs阅读 1,537评论 0 6
  • id与class的使用场景 id选择器,匹配特定id的元素类选择器,匹配class包含(不是等于)特定类的元素id...
    姚小帅阅读 336评论 0 0
  • 一、基本选择器 回顾选择器 通配符选择器、元素选择器、类选择器、ID选择器、后代选择器 新增基本选择器 子元素选择...
    越IT阅读 1,203评论 0 3
  • 1. 单位来了一个新同事,上海招来的。上了一天班,第二天就辞职回上海了。她说:这里人太少,心里发慌,感觉和窝在老家...
    劉小江阅读 340评论 7 4
  • 有TCP、 UDP、 ICMP和IGMP数据都通过IP数据报传输。 Internte 是特指使用tcp/ip协议的...
    Myth52125阅读 1,143评论 0 0