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

矫情吗；* 2022-05-13 15:14 70阅读 0赞

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

# 伪类选择器 #

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

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

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

## 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的用法。

<table style="width:700px;"> 
 <tbody> 
  <tr> 
   <td>选择器：nth-child(odd/event)</td> 
   <td style="width:423px;">父元素的第奇数个/偶数个子节点的元素</td> 
  </tr> 
  <tr> 
   <td>选择器：nth-last-child(odd/event)</td> 
   <td style="width:423px;">父元素的倒数奇数个/偶数个子节点的元素</td> 
  </tr> 
  <tr> 
   <td>选择器：nth-child(xn+y)</td> 
   <td style="width:423px;">父元素的第xn+y个子节点</td> 
  </tr> 
  <tr> 
   <td>选择器：nth-last-child(xn+y)</td> 
   <td style="width:423px;">父元素的倒数第xn+y个子节点</td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td style="width:226px;"><strong>类型</strong></td> 
   <td style="width:120px;"><strong>示例</strong></td> 
   <td style="width:487px;"><strong>描述</strong></td> 
  </tr> 
  <tr> 
   <td style="width:226px;">后代选择器</td> 
   <td style="width:120px;">div p</td> 
   <td style="width:487px;">选择 &lt;div&gt; 元素内部的所有 &lt;p&gt; 元素</td> 
  </tr> 
  <tr> 
   <td style="width:226px;">子选择器</td> 
   <td style="width:120px;">div&gt;p</td> 
   <td style="width:487px;">选择父元素为 &lt;div&gt; 元素的所有 &lt;p&gt; 元素</td> 
  </tr> 
  <tr> 
   <td style="width:226px;">相邻兄弟选择器</td> 
   <td style="width:120px;">div+p</td> 
   <td style="width:487px;">选择紧接在 &lt;div&gt; 元素之后的所有 &lt;p&gt; 元素</td> 
  </tr> 
  <tr> 
   <td style="width:226px;">通用选择器</td> 
   <td style="width:120px;">p~ul</td> 
   <td style="width:487px;">选择前面有 &lt;p&gt; 元素的每个 &lt;ul&gt; 元素</td> 
  </tr> 
 </tbody> 
</table>

# 浏览器专属的属性 #

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

<table> 
 <thead> 
  <tr> 
   <th style="width:88px;">前缀</th> 
   <th style="width:101px;">组织</th> 
   <th style="width:167px;">示例</th> 
   <th style="width:495px;">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:88px;">-ms-</td> 
   <td style="width:101px;">Microsoft</td> 
   <td style="width:167px;">-ms-interpolation-mode</td> 
   <td style="width:495px;">Interner Explorer浏览器专属的CSS属性需要加上-ms-前缀</td> 
  </tr> 
  <tr> 
   <td style="width:88px;">-moz-</td> 
   <td style="width:101px;">Mozllia</td> 
   <td style="width:167px;">-moz-read-only</td> 
   <td style="width:495px;">所有基于Gecko引擎的浏览器（Firefox）专属的CSS属性需要加上-moz-前缀</td> 
  </tr> 
  <tr> 
   <td style="width:88px;">-webkit-</td> 
   <td style="width:101px;">Webkit</td> 
   <td style="width:167px;">-webkit-box-shadow</td> 
   <td style="width:495px;">Chrome、Safari、新版Opera专属的CSS属性需要加上-webkit-前缀</td> 
  </tr> 
 </tbody> 
</table>