🚀 个人主页 极客小俊
✍🏻 作者简介:程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步!
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注


子元素伪类选择器
概念: 前面说到了伪元素是表示选中元素里面的内容在元素内部的一个特殊位置 ! 就要使用到伪元素选择器来设置CSS样式!
那么CSS3中专门提供了一些选择子元素的伪类选择器!
这些子元素伪类选择器可以让我们精确的找到指定位置的子元素!
:first-child
含义: 表示查找指定元素的第一个子元素! 也就是寻找父元素中所有子元素(包含后代元素)的第一个子元素!
语法: 元素选择器:first-child [选择器]{ … css 样式…}
注意:
- 通常情况下, 这个被选中的元素一定是某一个元素下第一个子元素, 而且被选择的第一个子元素之前不能有任何元素! 否则无法选择中!
- 如果:first-child前面没有选择器,代表选择所有元素! 所以一般前面都会跟一个选择器!
- :first-child后面可以根据需求继续往后面添加选择器!
- 如果某一个元素只有一个子元素的情况下,那么这个子元素是最后一个子元素 也是第一个子元素!
案例:
<style>
/*案例1: 选择整个页面所有元素(包含子元素、后代元素)下的第一个p元素 (这种是不考虑父级元素的)*/
p:first-child{
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
/*案例2 选择#connect元素下(包含子元素、后代元素)下的第一个p元素 (这种是限定在某元素下进行选择) */
#connect p:first-child{
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
</style>
<div id="connect">
<p title="str">CPU</p>
<p title="str">内存</p>
<p title="data-str">显卡</p>
<p>主板</p>
<p>电源</p>
<div>
<p class="test">水冷风扇1</p>
<p>水冷风扇2</p>
<p>水冷风扇3</p>
</div>
</div>
<div>
<p>电脑主机箱</p>
</div>
<hr>
<ul>
<li>2080Super</li>
<li>2080Ti</li>
<li>3080Ti</li>
</ul>
<ul>
<li>
<p title="str">java</p>
<p title="str">PHP</p>
<p title="data-str">Python</p>
</li>
<li>javascript</li>
<li>MySQL</li>
</ul>
<p>SQL Server 2000</p>
:last-child
含义: 表示查找指定元素的最后一个子元素! 也就是寻找父元素中所有子元素(包含后代元素)的最后一个子元素!
语法: 元素选择器:last-child [选择器]{ … css 样式…}
注意
- 通常情况下,这个被选中的元素一定是某一个元素下最后一个子元素,而且被选择的最后一个子元素后面不能有任何元素 否则无法选择中!
- 如果:last-child 前面没有选择器,代表选择所有元素! 所以一般前面都会跟一个选择器!
- :last-child 后面可以根据需求继续往后面添加选择器!
- 如果某一个元素只有一个子元素的情况下,那么这个子元素是最后一个子元素 也是第一个子元素!
案例:
<style>
p:last-child{
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
</style>
<div id="connect">
<p title="str">CPU</p>
<p title="str">内存</p>
<p title="data-str">显卡</p>
<p>主板</p>
<p>电源</p>
<div>
<p class="test">水冷风扇1</p>
<p>水冷风扇2</p>
<p>水冷风扇3</p>
</div>
</div>
<div>
<p>电脑主机箱</p>
</div>
<hr>
<ul>
<li>2080Super</li>
<li>2080Ti</li>
<li>3080Ti</li>
</ul>
<ul>
<li>
<p title="str">java</p>
<p title="str">PHP</p>
<p title="data-str">Python</p>
</li>
<li>javascript</li>
<li>MySQL</li>
</ul>
:nth-child(n)
含义: 寻找父元素中的指定位置子元素!
语法:元素选择器:nth-child(n) [选择器]{ ..css样式..}
注意:
- 参数n可以是一个不小于0的整数,表示要选择的第几个元素,最小从1开始!
- 参数n可以使用 odd 和 even 关键词, 来匹配是奇数或偶数的子元素! odd 是奇数、even是偶数!
- 参数n也可以使用一个公式: (an + b) , a代表一个整数、n 是计数器(从 0 开始),b 是偏移值 , 提示: a和n是乘积关系, b也是一个整数,根据需求来决定是否偏移。
案例:
<style>
/*案例1*/
p:nth-child(2){
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
/*案例2*/
p:nth-child(odd){
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
</style>
<div id="connect">
<p title="str">CPU</p>
<p title="str">内存</p>
<p title="data-str">显卡</p>
<p>主板</p>
<p>电源</p>
<div>
<p class="test">水冷风扇1</p>
<p>水冷风扇2</p>
<p>水冷风扇3</p>
</div>
</div>
<div>
<p>电脑主机箱</p>
</div>
<hr>
<ul>
<li>2080Super</li>
<li>2080Ti</li>
<li>3080Ti</li>
</ul>
<ul>
<li>
<p title="str">java</p>
<p title="str">PHP</p>
<p title="data-str">Python</p>
</li>
<li>javascript</li>
<li>MySQL</li>
</ul>
<p>SQL Server 2000</p>
案例2:
<style>
p:nth-child(2n+0){
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
</style>
<div>
<p title="str">CPU</p>
<p title="str">内存</p>
<p title="data-str">显卡</p>
<p>主板</p>
<p>电源</p>
<p>水冷风扇1</p>
<p>水冷风扇2</p>
<p>水冷风扇3</p>
<p>水冷风扇4</p>
<p>水冷风扇5</p>
<p>水冷风扇6</p>
</div>
:first-of-type
含义:表示查找指定元素的第一个子元素! 不管指定元素前面是否存在其他元素 都会被选中!
语法: 元素选择器:first-of-type [选择器] { … css样式…}
案例:
<style>
#connect p:first-of-type{
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
</style>
<div id="connect">
<div>重庆市</div>
<p title="str">CPU</p>
<p title="str">内存</p>
<p title="data-str">显卡</p>
<p>主板</p>
<p>电源</p>
<p>水冷风扇1</p>
<p>水冷风扇2</p>
<p>水冷风扇3</p>
<p>水冷风扇4</p>
<p>水冷风扇5</p>
<p>水冷风扇6</p>
</div>
:last-of-type
含义:表示查找指定元素的最后一个子元素! 不管指定元素之后是否存在其他元素 都会被选中!
语法: 元素选择器:last-of-type [选择器] { … css样式…}
<style>
#connect p:last-of-type{
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
</style>
<div id="connect">
<div>重庆市</div>
<p title="str">CPU</p>
<p title="str">内存</p>
<p title="data-str">显卡</p>
<p>主板</p>
<p>电源</p>
<p>水冷风扇1</p>
<p>水冷风扇2</p>
<p>水冷风扇3</p>
<p>水冷风扇4</p>
<p>水冷风扇5</p>
<p>水冷风扇6</p>
<div>北京市</div>
</div>
:nth-of-type(n)
含义: 寻找父元素中指定类型并且指定位置子元素!
语法:元素选择器:nth-of-type(n) [选择器]{ …css样式…}
提示: :nth-of-type(n) 与 :nth-child(n)的区别就在于 :nth-of-type(n)它所指定的元素之前或之后,或者说中间夹杂着其他元素,都会被选择中! 主要就是因为:nth-of-type(n)指定了类型的子元素
参数n 可以使用even,来找到偶数的子元素, 也可以使用odd,来找到奇数的子元素!
<style>
#connect p:nth-of-type(odd){
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
</style>
<div id="connect">
<div>重庆市</div>
<p title="str">CPU</p>
<p title="str">内存</p>
<p title="data-str">显卡</p>
<p>主板</p>
<p>电源</p>
<p>水冷风扇1</p>
<p>水冷风扇2</p>
<p>水冷风扇3</p>
<p>水冷风扇4</p>
<p>水冷风扇5</p>
<p>水冷风扇6</p>
<div>北京市</div>
<p>水冷风扇7</p>
<p>水冷风扇8</p>
<p>水冷风扇9</p>
</div>
更多子元素伪类选择器 [扩展]
:only-child
含义: 寻找指定父元素下唯一的一个子元素 , 注意:这个父元素下只有一个被指定的子元素! 才能被选择中!
语法: 元素选择器:only-child [选择器]{ …css样式…}
案例:
<style>
ul li:only-child{
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
</style>
<ul>
<li>电脑硬件</li>
<li>电脑硬件</li>
</ul>
<ul>
<li>显卡</li>
</ul>
:only-of-type
含义: 寻找指定父元素下指定类型的元素,并且该类型元素只能存在一个。 注意:这个父元素下可以存在多个元素,但指定类型的元素只能存在一个,才能被选择中!
语法: 元素选择器:only-of-type [选择器]{ …css样式…}
案例:
<style>
div div:only-of-type{
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
</style>
<div>
<p>只能存在一个p元素</p>
<span>存在一个span元素</span>
<div>存在一个div元素</div>
<div>存在一个div元素</div>
</div>
<div>
<p>只能存在一个p元素</p>
<div>存在一个div元素</div>
</div>
:nth-last-child(n)
含义: 寻找父元素中的指定位置子元素! 从父元素中的最后一个子元素开始计数。
语法:元素选择器:nth-last-child(n) [选择器]{ …css样式…}
注意:
- 参数n可以是一个不小于0的整数,表示要选择的第几个元素,最小从1开始!
- 参数n可以使用 odd 和 even 关键词, 来匹配是奇数或偶数的子元素! odd 是奇数、even是偶数!
- 参数n也可以使用一个公式: (an + b) , a代表一个整数、n 是计数器(从 0 开始),b 是偏移值 , 提示: a和n是乘积关系, b也是一个整数,根据需求来决定是否偏移。
- 以上参数的计数方式都是以从父元素中的最后一个子元素开始计数。
案例:找到ul中倒数第五个li元素
<style>
ul li:nth-last-child(5){
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
</style>
<ul>
<li>倒数第六个子元素,第一个子元素</li>
<li>倒数第五个子元素</li>
<li>倒数第四个子元素</li>
<li>倒数第三个子元素</li>
<li>倒数第二个子元素</li>
<li>最后一个子元素</li>
</ul>
:nth-last-of-type(n)
含义: 寻找父元素中指定类型并且指定位置子元素! 从父元素中的最后一个子元素开始计数。
语法:元素选择器:nth-last-of-type(n) [选择器]{ …css样式…}
注意:nth-last-of-type(n)的注意事项与:nth-last-child(n)的注意事项一致。
案例:找到div中倒数第三个的span元素
<style>
div span:nth-last-of-type(3){
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
</style>
<div>
<p>倒数第五个p元素,第一个子元素</p>
<span>倒数第五个span元素</span>
<p>倒数第四个p元素</p>
<span>倒数第四个span元素</span>
<p>倒数第三个p元素</p>
<span>倒数第三个span元素</span>
<span>倒数第二个span元素</span>
<p>倒数第二个p元素</p>
<span>最后一个span元素</span>
<p>最后一个p元素,最后一个子元素</p>
</div>


"👍点赞" "✍️评论" "收藏❤️"欢迎一起交流学习❤️❤️💛💛💚💚

好玩 好用 好看的干货教程可以点击下方关注❤️微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇


1186

被折叠的 条评论
为什么被折叠?



