css3之nth-child和nth-of-type

最新推荐文章于 2024-03-09 00:46:14 发布

我就是陈星烨

最新推荐文章于 2024-03-09 00:46:14 发布

阅读量403

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/u012657197/article/details/73740745

版权

css3 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

nth-child

p:nth-child(n){
//表示p的父元素下的第n个子元素
}

nth-of-type

p:nth-of-type(n){
//表示p的父元素下的第n个子元素且这个子元素是p
}

举例：nth-of-type

<p>1</p>
<p>2</p>
<span>3</span>
<p>4</p>
<p>5</p>

p:nth-of-type(odd){
    background:red;//表示第奇数个p元素，即内容为1，4
}
p:nth-of-type(even){
    background:green;//表示第偶数个p元素，即内容为2，5
}

显示结果如下：
这里写图片描述

举例：nth-child

<p>1</p>
<p>2</p>
<span>3</span>
<p>4</p>
<p>5</p>

p:nth-child(odd){
    background:red;//表示第奇数个子元素，且子元素为p,即内容为1，5
}
p:nth-child(even){
    background:green;//表示第偶数个子元素，且子元素为p,即内容为2，4
}