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

Ylisar · 发表于 2022-6-26 21:09

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-mode	Interner Explorer浏览器专属的CSS属性需要加上-ms-前缀
-moz-	Mozllia	-moz-read-only	所有基于Gecko引擎的浏览器（Firefox）专属的CSS属性需要加上-moz-前缀
-webkit-	Webkit	-webkit-box-shadow	Chrome、Safari、新版Opera专属的CSS属性需要加上-webkit-前缀

		自动登录	找回密码
密码			立即注册