CSS3新增的伪类选择器，让你体验使用CSS3的快感。

最新推荐文章于 2024-09-15 23:04:16 发布
最新推荐文章于 2024-09-15 23:04:16 发布
阅读量7.5k 收藏 4
点赞数 3
分类专栏： HTML5+CSS3 HTML5和CSS3的前世今生 文章标签： CSS3选择器 伪类选择器 层次选择器 CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sujin_/article/details/83374093
版权

CSS选择器用于选择你想要的元素的样式的模式。伪类元素主要用于对已有选择器做进一步的限制，对已有选择器能匹配的元素做进一步的过滤。

伪类选择器

1.UI元素状态伪类选择器

UI元素状态伪类选择器主要用于根据UI元素的状态进行筛选，UI元素状态伪类选择器有如下几个。

示例描述示例描述
:link选择链接元素:visited访问过链接元素后的状态
:hover鼠标悬停其上的元素:ative鼠标点击时触发的事件
:focus当前获取焦点的元素:enabled元素处于可用状态
:disabled元素处于不可用状态:checked元素处于选中状态
:selection当前被选中的内容:indeterminate当前选中状态不明确的元素
:read-only处于只读状态的元素:read-write处于读写状态的元素
:required具有必填要求的元素:optional无必须要求填写的元素
:valid能通过输入校验的元素:invalid不能通过输入校验的元素
:in-range当前处于指定范围的元素:out-of-range当前处于超出范围的元素

2.结构伪类选择器

结构伪类选择器是指根据HTML元素之间的结构关键进行筛选的伪类选择器。

2.1 :root伪类选择器

用于匹配HTML文档的根元素，根元素只能是<html>元素。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> :root伪选择器 </title>
	<style type="text/css">
		:root {
			background-color: #ccc;
		}
		body {
			background-color: #888;
		}
	</style>
</head>
<body>
Java Java Java<br/>Java EE Java EE Java EE<br/>
Ajax Ajax Ajax<br/>XML XML XML<br/>
Java EE Java EE Java EE<br/>Android Android Android<br/>
</body>
</html>

2.2 :first-child、:last-child、:nth-child、:nth-last-child和:only-child

这组选择器依次要求匹配该元素必须是其父元素的第一个子节点、最后一个子节点、第n个子节点、倒数第n个子节点、唯一的子节点，这是这组选择器的共同特点，下面将示范它的用法，希望大家想学习CSS3选择器的朋友，以实际操作为主，去理解CSS3选择器的含义和用法。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> :child </title>
	<style type="text/css">
		/* 定义对作为其父元素的第一个子节点的li元素起作用的CSS样式 */
		li:first-child {
			border: 1px solid black;
		}
		/* 定义对作为其父元素的最后一个子节点的li元素起作用的CSS样式 */
		li:last-child {
			background-color: #aaa;
		}
		/* 定义对作为其父元素的第2个子节点的li元素起作用的CSS样式 */
		li:nth-child(2){
			color: #888;
		}
		/* 定义对作为其父元素的倒数第2个子节点的li元素起作用的CSS样式 */
		li:nth-last-child(2){
			font-weight: bold; 
		}
		/* 定义对作为其父元素的唯一的子节点的span元素起作用的CSS样式 */
		span:only-child {
			font-size: 30pt;
			font-family: "隶书";
		}
	</style>
</head>
<body>
<ol>
	<li>www.baidu.com</li>
	<li>www.baidu.com</li>
	<li>www.baidu.com</li>
	<li>www.baidu.com</li>
	<li>www.baidu.com</li>
</ol>
<ul>
	<li id="java">Java</li>
	<li id="javaee">Java EE</li>
	<li id="ajax">Ajax</li>
	<li id="xml">XML</li>
	<li id="ejb">Java EE企业应用</li>
	<li><span id="android">Android</span></li>
</ul>
<span>Java</span>
</body>
</html>

 对于nth-child和nth-last-child两个伪类选择器，它们的功能不止于此，还支持奇数、偶数节点和xn+y的用法。

选择器：nth-child(odd/event)父元素的第奇数个/偶数个子节点的元素
选择器：nth-last-child(odd/event)父元素的倒数奇数个/偶数个子节点的元素
选择器：nth-child(xn+y)父元素的第xn+y个子节点
选择器：nth-last-child(xn+y)父元素的倒数第xn+y个子节点
<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> :nth-child </title>
	<style type="text/css">
		/* 定义对作为其父元素的奇数个子节点的li元素起作用的CSS样式 */
		li:nth-child(odd) {
			margin: 10px;
			border: 2px dotted black;
		}
		/* 定义对作为其父元素的偶数个子节点的li元素起作用的CSS样式 */
		li:nth-child(even) {
			padding: 4px;
			border: 1px solid black;
		}
		/* 定义对作为其父元素的倒数第3n+1个（1、4、7）子节点
			的li元素起作用的CSS样式 */
		li:nth-last-child(3n+1) {
			border: 2px solid black;
		}
	</style>
</head>
<body>
<ul>
	<li id="java">Java</li>
	<li id="javaee">Java EE</li>
	<li id="ajax">Ajax</li>
	<li id="xml">XML</li>
	<li id="ejb">Java EE企业应用</li>
	<li id="android">Android</li>
</ul>
</body>
</html>

2.3 :first-of-type、:flast-of-type、:nth-of-type、:nth-last-of-type和:only-of-type

这组伪类选择器与上面那组xxx-child有些类似，但这组并不要求是父元素的第1个、倒数n个、唯一元素，只要求它们与其有共同类型、同级元素的第1个、倒数n个、唯一元素。也跟上组一样拥有奇偶节点和xn+y的用法。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> :type </title>
	<style type="text/css">
		p {
			padding: 5px;
		}
		/* 匹配p选择器，且是与它同类型、同级的兄弟元素中的第一个的CSS样式 */
		p:first-of-type{
			border: 1px solid black;
		}
		/* 匹配p选择器，且是与它同类型、同级的兄弟元素中的最后一个的CSS样式 */
		p:last-of-type {
			background-color: #aaa;
		}
		/* 匹配p选择器，且是与它同类型、同级的兄弟元素中的第2个的CSS样式 */
		p:nth-of-type(2){
			color: #888;
		}
		/* 匹配p选择器，且是与它同类型、同级的兄弟元素中的倒数第2个的CSS样式 */
		p:nth-last-of-type(2){
			font-weight: bold; 
		}
	</style>
</head>
<body>
<div>百度一下</div>
<p>No.1</p>
<p>No.2</p>
<p>No.3</p>
<p>No.4</p>
<hr/>
<div>
	<div id="java">Java</div>
	<div id="javaee">Java EE</div>
	<p id="ajax">Ajax</p>
	<p id="xml">XML</p>
	<p id="ejb">Java EE企业应用</p>
	<p id="android">Android</p>
	<div id="swift">Swift</div>
</div>
</body>
</html>

2.4 :empty伪类选择器

：empty伪类选择器要求该元素只能是空元素，不能包含子节点，也不能包含文本内容（连空格都不行），示例如下。


<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> :empty </title>
	<style type="text/css">
		/* 定义对空元素起作用的CSS样式 */
		:empty {
			border: 1px solid black;
			height: 60px;
		}
	</style>
</head>
<body>
<img src="wjc.gif" alt="www.baidu.com"/>
<div></div>
<div> </div>
</body>
</html>

2.5 :lang伪类选择器

lang伪类选择器要求匹配的内容必须是指定语言的元素。对使用多语言版本的网站，可以根据不同语言版本，设置不同的样式。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> :lang </title>
	<style type="text/css">
		/* 定义对语言为zh的元素起作用 */
		:lang(zh) {
			border: 1px solid black;
			height: 60px;
		}
	</style>
</head>
<body>
<div lang="zh">Java</div>
<div>Java EE</div>
<p lang="zh">Android</p>
</body>
</html>

3.其他伪类选择器

3.1 目标伪类选择器

target选择器要求元素必须是命名锚点（可快速将访问者带到指定位置）的目标，而且必须是正在访问的目标。我们可以通过该选择器高亮显示正在被访问的目标，听了这么多，是不是没怎么明白，让我们一起来看下面的示例，实操一下你就懂了。


<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> :target </title>
	<style type="text/css">
		:target{
			background-color: #ff0;
		}
	</style>
</head>
<body>
<p id="menu">
<a href="#java">Java</a> | 
<a href="#ee">Java EE</a> | 
<a href="#android">Android</a> | 
<a href="#ejb">Java EE企业应用</a>
</p>
<div id="java">
<h2>Java</h2>
<p>Java</p>
</div>
<div id="ee">
<h2>Java EE</h2>
<p>Java EE</p>
</div>
<div id="android">
<h2>Android</h2>
<p>Android</p>
</div>
<div id="ejb">
<h2>Java EE企业应用</h2>
<p>Java EE企业应用</p>
</div>
</body>
</html>

3.2 否定伪类选择器

not伪类选择器就是用两个选择器做减法，选择器匹配非指定元素或者选择器的每个元素，下面将示范它的用法。


<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> :not </title>
	<style type="text/css">
		li:not(#ajax) {
			color: #999;
			font-weight: bold;
		}
	</style>
</head>
<body>
<ul>
	<li id="java">Java</li>
	<li id="javaee">Java EE</li>
	<li id="ajax">Ajax</li>
	<li id="xml">XML</li>
	<li id="android">Android</li>
</ul>
</body>
</html>

层次选择器

层次选择器是通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中基类关系可以方便快捷地定位元素，以下就是层次选择器的类型。

类型示例描述
后代选择器div p选择 <div> 元素内部的所有 <p> 元素
子选择器div>p选择父元素为 <div> 元素的所有 <p> 元素
相邻兄弟选择器div+p选择紧接在 <div> 元素之后的所有 <p> 元素
通用选择器p~ul选择前面有 <p> 元素的每个 <ul> 元素

浏览器专属的属性

有些CSS属性还不支持一些浏览器，为了让这些浏览器识别专属属性，CSS规范在CSS属性前增加各自的浏览器前缀。例如：-moz-前缀是Mozilla浏览器（如Firefox）的前缀。常见浏览器前缀如下所示。

前缀组织示例说明
-ms-Microsoft-ms-interpolation-modeInterner Explorer浏览器专属的CSS属性需要加上-ms-前缀
-moz-Mozllia-moz-read-only所有基于Gecko引擎的浏览器（Firefox）专属的CSS属性需要加上-moz-前缀
-webkit-Webkit-webkit-box-shadowChrome、Safari、新版Opera专属的CSS属性需要加上-webkit-前缀
湮顾千古
关注
专栏目录
【36】CSS3（1）—— 新增选择器③结构伪类选择器
倏存的博客
04-08 527
结构伪类选择器1.介绍2. 补充3.所有结构伪类选择器举例
css3的新增的选择器
ovocc的博客
10-21 1563
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。 1.回顾一下旧的选择器 标签选择器 即是html标签名作为选择器 举例： <p>标签选择器</p> p { color: yellow; } 这里有个p标签，给他添加样式的时候也是用的p。这种就是标签选择器 类选择器 用class属性调用class类 举例： <p class="one">标签选择器</p> .one { .
CSS3新增的伪类选择器
weixin_33692284的博客
11-07 215
　　伪类选择器的作用：对已有选择器做进一步的限制，对已有选择器能匹配的元素做进一步的过滤。CSS 3提供的伪类选择器主要分为以下三类： 结构性伪类选择器 UI元素状态伪类选择器 其他伪类选择器 　　 1、结构性伪类选择器 Selector:root：匹配文档的根元素。在HTML文档中，根元素永远是<html.../>元素。 Selector:first-chi...
CSS3
最新发布
m0_73759720的博客
09-15 1832
本文主要介绍了CSS3新增的选择器：属性、伪类、兄弟、相邻选择器，CSS3新增的属性：盒子模型、渐变、过渡、转换等属性。
CSS3.0新增伪类选择器
若有博文对您有帮助，欢迎点赞关注，收藏评论。
03-03 714
CSS3.0新增伪类选择器结构性伪类选择器根节点子节点奇，偶个节点xn+y个节点UI元素状态伪类选择器浏览器专属的属性在脚本中修改样式 结构性伪类选择器 根节点 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html"/> <title> :root伪类选择器 </title>
css3新增伪类选择器
Technology_liu的博客
08-30 1081
E:nth-child(n):表示E父元素下第N个子元素，且类型是E,代表父元素下所有子元素的位置（从1开始第几个就是第几个）。 N:可以是任何数字,5z，还可以是通项公式，还可以是关键字          关键字：                    Odd:奇数                    Even:偶数 E:nth-last-child(n),从后往前找，用法同上 E
css中什么是伪类选择器？伪类选择器的简要介绍
lin123_00的博客
05-18 2677
本章给大家带来css中什么是伪类选择器？伪类选择器的简要介绍。让大家可以了解在css中伪类选择器的作用，css伪类选择器有哪些分类等知识。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 更多相关视频： 0基础前端利用『HTML+CSS』制作你喜欢的暗黑破坏神网页开发：BV1C54y1X7ro 前端发展简史，功能以及未来趋势！（你值得观看）：BV1w5411s7e4 给想学编程又无从下手的小白一些建议：BV1Zf4y117ji 「HTML+CSS」实现妙笔千山播放器制作（思路讲.
CSS3属性选择器及伪类选择器
huangbaokang的博客
08-22 3914
CSS3相比CSS2在选择器中增加了通配符的概念，赋予其强大功能。 E[attr^=&amp;amp;amp;amp;quot;val&amp;amp;amp;amp;quot;] 定义了属性attr，并且以val开头的任意字符串 E[attr$=&amp;amp;amp;amp;quot;val&amp;amp;amp;amp;quot;] 定义了属性attr，并且以val结尾的任意字符串 E[attr*=&amp;amp;amp;amp;quot;val
CSS3——CSS3 新增选择器
流楚丶格念的博客
07-15 4280
天空之外结构(位置)伪类选择器（CSS3)案例属性选择器案例伪元素选择器（CSS3): 伪类与 :: 伪元素注意案例 结构(位置)伪类选择器（CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型 :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计
【35】CSS3（1）—— 新增选择器②兄弟选择器
倏存的博客
04-08 1684
兄弟选择器1.介绍2. 相邻兄弟选择器3.其他兄弟选择器4.举例
CSS3 新增伪类选择器
wangjingyi
03-27 200
伪类选择器 [b]:nth-child(n)选择器[/b] 用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的[color=red]起始值始终是1[/color]，而不是0!表达式的值为0或小于0的时候，不选择任何匹配的元素。 [b]:nth-last...
css3系列之伪类选择器
weixin_30680385的博客
07-15 242
Pseudo-Classes Selectors(伪类选择器) 　　E:not(s)　　E:root　　E:target 　　E:first-child　　E:last-child　　E:only-child　　E:nth-child(n)　　E:nth-last-child(n) 这上面一行的选择器，都会考虑其他元素的的影响。 　　E:first-of-type　　E:last-...
【CSS】3-css伪类选择器
JeffHan^_^的博客
07-27 256
css伪类用于添加一些选择器的特殊效果。
CSS3新增结构伪类选择器
WangZhang_521的博客
01-05 138
CSS3新增结构伪类选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
CSS3新增伪类选择器
weixin_44079801的博客
06-26 187
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {
CSS3 伪类选择器
weixin_43555093的博客
03-18 276
1.认识 a 标签的:target属性 a标签的target属性规定在何处打开链接文档. &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;伪类&lt;/title&gt; &lt;style
CSS3伪类选择器
weixin_45062076的博客
02-15 349
a:link{color: blue;} /*点击链接之前*/ a:visited{color: blue;} /*点击链接之后*/ a:hover{color: blue;} /*鼠标移入*/ a:active{color: blue;} /*点击左键*/ input:focus{color: blue;} /*获得焦点*/
深入理解CSS3选择器：伪类选择器详解
"本文将详细介绍CSS3的选择器中的伪类选择器，包括常见的伪类选择器用法以及CSS3新增的`:nth-child`选择器的使用。" 在CSS3中，伪类选择器是一个非常重要的概念，它们允许我们对元素在特定状态或位置时应用特定的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值