CSS选择器（伪类）3

最新推荐文章于 2023-06-22 21:35:09 发布

拾光漫漫可否达

最新推荐文章于 2023-06-22 21:35:09 发布

阅读量245

点赞数

分类专栏：前端学习

原文链接：https://www.runoob.com/

版权

前端学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、伪类（段落）

选择器	示例	示例说明
:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 素
:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:nth-child(n)	p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:first-letter	p:first-letter	选择每个< p> 元素的第一个字母
:first-line	p:first-line	选择每个< p> 元素的第一行
:before	p:before	在每个< p>元素之前插入内容
:after	p:after	在每个< p>元素之后插入内容
:lang(language)	p:lang(it)	为< p>元素的lang属性选择一个开始值

详细介绍

(1)

选择器	示例	示例说明
:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 素
:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素

代码和运行结果
示例三1

（2）

选择器	示例	示例说明
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素

代码示例1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>教程</title> 
<style>
/*:first-child 选择器匹配其父元素中的第一个子元素。
	匹配 <p> 的父元素的第一个<p>元素*/	
	p:first-child{background-color:yellow;}
	
/*:last-child 选择器用来匹配父元素中最后一个子元素。
	指定父元素中最后一个p元素的背景色：*/
	p:last-child{background:blue;}
	
	/*:only-child 选择器匹配属于父元素中唯一子元素的元素。。
	匹配属于父元素中唯一子元素的 p 元素:*/
	p:only-child{background:black;}
</style>
</head>
<body>
	<p>父元素的第一个子元素(body).</p>
	<h1>Welcome to My Homepage</h1>
	<p>不是父元素的第一个子元素(body).</p>
<div>
	<p>父元素的第一个子元素 (div).</p>
	<p>父元素的第一个子元素 (div)</p>
</div>
</body>
</html>

结果运行：
示例三2
代码示例2
在这里插入图片描述
代码示例3

(3)

选择器	示例	示例说明
:nth-child(n)	p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素

代码示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>教程)</title> 
<style>
/*指定每个 p 元素匹配的父元素中第 2 个子元素的背景色：
	不论元素的类型，从第一个子元素开始计数。*/	
	p:nth-child(2){background:red;}
	
/*指定每个 p 元素匹配同类型中的倒数第 2 个同级兄弟元素背景色：
	不论元素的类型，从最后一个子元素开始计数。*/	
	p:nth-last-child(2){background:blue;}

	/*指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色：
	匹配同类型中的第n个同级兄弟元素。*/	
	p:nth-of-type(2){background:yellow;}
	
	/*指定每个p元素匹配同类型中的倒数第2个同级兄弟元素背景色：
	选择器匹配同类型中的倒数第n个同级兄弟元素*/
	p:nth-last-of-type(3){background:green;}
</style>
</head>
<body>
	<h1>这是一个标题</h1>
	<p>这是第一个段落。</p>
	<p>这是第二个段落。</p>
	<p>这是第三个段落。</p>
	<p>这是第四个段落。</p>
	<p>这是第五个段落。</p>
</body>
</html>

运行结果
示例三3

(4)

选择器	示例	示例说明
:first-letter	p:first-letter	选择每个< p> 元素的第一个字母
:first-line	p:first-line	选择每个< p> 元素的第一行

代码和运行结果
示例三4

(5)

选择器	示例	示例说明
:before	p:before	在每个< p>元素之前插入内容
:after	p:after	在每个< p>元素之后插入内容

代码和运行结果
示例三5

(6)

选择器	示例	示例说明
:lang(language)	p:lang(it)	为< p>元素的lang属性选择一个开始值

代码和运行结果
示例三6

（二）

选择器	示例	示例说明
:not(selector)	:not§	选择所有p以外的元素
:root	root	选择文档的根元素
:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)

详细解说

(1)

选择器	示例	示例说明
:not(selector)	:not§	选择所有p以外的元素

代码和运行
示例4

(2)

选择器	示例	示例说明
:root	root	选择文档的根元素

代码和运行
示例四2

(3)

选择器	示例	示例说明
:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)

代码和运行结果
当点击跳转到新内容 1
3-1
当点击跳转到新内容 2

在这里插入图片描述

来源

菜鸟教程

拾光漫漫可否达

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器（伪类）3

一、伪类（段落）选择器示例示例说明:first-of-typep:first-of-type选择的每个 p 元素是其父元素的第一个 p 素:last-of-typep:last-of-type选择每个p元素是其母元素的最后一个p元素:only-of-typep:only-of-type选择所有仅有一个子元素为p的元素:first-childp:first-child选择器匹配属于任意元素的第一个子元素的元素:last-childp:las
复制链接

扫一扫