HTML5——CSS3新增伪类选择器（常用）

结构性伪类选择器

:first-child 第一个子节点、:last-child 最后1个子节点、:nth-child(n) 第n个子节点、:nth-last-child(n) 倒数第n个子节点、:only-child 唯一的子节点

:nth-child(n)、:nth-last-child(n)还有一些特殊用法，通过括号内的东西来限制选择：

1、odd/event:第奇数个/偶数个元素

2、xn+y：第xn+y个元素

话不多说上代码，下面是对li标签设置伪类选择器

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		li:first-child{
			border: 1px solid black;
		}

		li:last-child{
			background-color: #aaa;
		}

		li:nth-child(2){
			color: #888;
		}

		li:nth-last-child(2){
			font-weight: bold;
		}

		span:only-child{
			font-size: 30pt;
		}
	</style>
</head>
<body>
	<ol>
		<li>oaaaaaaaaaaa</li>
		<li>obbbbbbbbbbb</li>
		<li>occccccccccc</li>
		<li>odddddddddd</li>
		<li>oeeeee</li>
        <li><span id="andorid"></span>saaaaaa啊飒飒</li>
	</ol>

</body>

可以看到不同的效果

UI元素状态伪类选择器

:link（未被访问前的元素（通常只能是超链接））、:visited(已被访问过的元素（通常只能是超链接）)、:active(正在被访问的元素即鼠标点击与释放之间（通常只能是超链接）)、:hover(鼠标悬停状态的元素)、:focus(已得到焦点的元素)

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.a{
			font-size: 50px;
		}
		.a:link{
			color: red;
		}
		.a:visited{
			color: grey;
		}
		.a:active{
			color: green;
		}
		.b{
			height: 40px;
			width: 200px;
		}
		.b:focus{
			background-color: blue;
		}
		.c{
			height: 40px;
			width: 60px;
		}
		.c:hover{
			background-color: skyblue;
		}

	</style>
</head>
<body>
	<a href="#" class="a">aaa</a>
	<form action="#">
		文本框:<input type="text" name="aaa" class="b"/>
		<input type="submit" value="提交" class="c"/>
	</form>
</body>
</html>

一开始是这样的