备注：为了更好的区分伪类和伪元素，书写上CSS做了区分。例如，伪类 :first-child；伪元素
在下面的示例中：
div >p:only-child{
color:red//不变红
}
div >p:only-of-type{
color:red//变红
}
<div>
<p>test1</p>
<span>test2</span>
</div>
ul >li:nth-child(2){
color:red //选择该元素所有子元素的第二个子元素
}
ul >li:nth-last-child(2){
color:red //选择该元素所有子元素的倒数第二个子元素
}
ul >li:nth-of-type(2){
color:red //选择该元素所有该类型子元素的第二个子元素
}
ul >li:nth-last-of-type(2){
color:red //选择该元素所有该类型子元素的倒数第二个子元素
}
:target{
color:red //定位到锚点，选择此元素
}
//锚点的定位：
首先在HTML元素中定义一个ID属性值，例如<p id="test">asd</p>
然后在浏览器地址栏，在URL最后加上#test，便可以定位到该锚点了。
锚点的使用：
可以用来将一篇很长的文章分段，
eg.<a href="#02">跳转到</a>
<p id="02">……</p>
其实锚点只需name就可以可，加id是为了让它兼容性更好
所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！
浏览器兼容性：
E:hover 支持firefox、safari、Opera、ie8、chrome------------
E:active 支持firefox、safari、Opera、chrome 不支持ie8
E:focus 支持firefox、safari、Opera、ie8、chrome-------------
E:enabled 支持firefox、safari、Opera、chrome不支持ie8
E:disabled支持firefox、safari、Opera、chrome不支持ie8
E:read-only 支持firefox、Opera 不支持ie8、safari、chrome
E:read-write 支持firefox、Opera 不支持ie8、safari、chrome
E:checked 支持firefox、safari、Opera、chrome不支持ie8
E::selection 支持firefox、safari、Opera、chrome 不支持ie8
E:default 只支持firefox ------------
E:indeterminate只支持chrome ------------
E:invalid 支持firefox、safari、Opera、chrome 不支持ie8
E:valid 支持firefox、safari、Opera、chrome 不支持ie8
E:required支持firefox、safari、Opera、chrome 不支持ie8
E:optional 支持firefox、safari、Opera、chrome 不支持ie8
E:in-range支持firefox、safari、Opera、chrome 不支持ie8
E:out-of-rang支持firefox、safari、Opera、chrome 不支持ie8
下面就其使用做详细的说明
1、选择器E:hover、E:active和E:focus
1)、E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式
使用方法：
<元素>:hover{
CSS样式
}
我们可以在“<元素>”中添加元素的type属性。
例：
input[type="text"]:hover{
CSS样式
}
2)、E:active选择器被用来指定元素被激活时使用的样式
3)、E:focus选择器被用来指定元素获得光标聚焦点使用的样式，主要是在文本框控件获得聚焦点并进行文字输入时使用。
例如：
[html] view plain copy
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择器E:hover、E:active和E:focus</title>
<style>
input[type="text"]:hover{
background: green
}
input[type="text"]:focus{
background: #ff6600
color: #fff
}
input[type="text"]:active{
background: blue
}
input[type="password"]:hover{
background: red
}
</style>
</head>
<body>
<h1>选择器E:hover、E:active和E:focus</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名">
<br/>
<br/>
密码：<input type="password" placeholder="请输入密码">
</form>
</body>
</html>
2、E:enabled伪类选择器与E:disabled伪类选择器
1)、E:enabled选择器被用来指定当元素处于可用状态时的样式。
2)、E:disabled选择器被用来指定当元素处于不可用状态时的样式。
例如：
[html] view plain copy
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:enabled伪类选择器与E:disabled伪类选择器</title>
<style>
input[type="text"]:enabled{
background: green
color: #ffffff
}
input[type="text"]:disabled{
background: #727272
}
</style>
</head>
<body>
<h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" disabled>
<br/>
<br/>
学校：<input type="text" placeholder="请输入学校">
</form>
</body>
</html>
3、E:read-only伪类选择器与E:read-write伪类选择器
1)、E:read-only选择器被用来指定当元素处于只读状态时的样式。
2)、E:read-write选择器被用来指定当元素处于非只读状态时的样式。
[html] view plain copy
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>read-only伪类选择器与E:read-write伪类选择器</title>
<style>
input[type="text"]:read-only{
background: #000
color: green
}
input[type="text"]:read-write{
color: #ff6600
}
</style>
</head>
<body>
<h1>read-only伪类选择器与E:read-write伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" value="winson" readonly>
<br/>
<br/>
学校：<input type="text" placeholder="请输入学校">
</form>
</body>
</html>
4、伪类选择器E:checked、E:default和indeterminate
1)、E:cehcked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。
2)、E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。
3)、E:indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式。
[html] view plain copy
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>checked伪类选择器</title>
<style>
input[type="checkbox"]:checked{
outline: 2px solid green
}
</style>
</head>
<body>
<h1>checked伪类选择器</h1>
<form>
房屋状态：
<input type="checkbox">水
<input type="checkbox">电
<input type="checkbox">天然气
<input type="checkbox">宽带
</form>
</body>
</html>
默认的选择项
[html] view plain copy
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>default伪类选择器</title>
<style>
input[type="checkbox"]:default{
outline: 2px solid green
}
</style>
</head>
<body>
<h1>default伪类选择器</h1>
<form>
房屋状态：
<input type="checkbox" checked>水
<input type="checkbox">电
<input type="checkbox">天然气
<input type="checkbox">宽带
</form>
</body>
</html>
[html] view plain copy
<h1 style="color: rgb(0, 0, 0)font-family: Simsunfont-style: normalfont-variant: normalletter-spacing: normalline-height: normalorphans: autotext-align: starttext-indent: 0pxtext-transform: nonewhite-space: normalwidows: 1word-spacing: 0px-webkit-text-stroke-width: 0px">indeterminate伪类选择器</h1><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>indeterminate伪类选择器</title>
<style>
input[type="radio"]:indeterminate{
outline: 2px solid green
}
</style>
</head>
<body>
<h1>indeterminate伪类选择器</h1>
<form>
性别：
<input type="radio">男
<input type="radio">女
</form>
</body>
</html>
5、伪类选择器E::selection
1)、E:selection伪类选择器用来指定当元素处于选中状态时的样式。
例如
[html] view plain copy
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>伪类选择器E::selection</title>
<style>
::selection{
background: green
color: #ffffff
}
input[type="text"]::selection{
background: #ff6600
color: #ffffff
}
</style>
</head>
<body>
<h1>伪类选择器E::selection</h1>
<p>今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！</p>
<input type="text" placeholder="文本">
</body>
</html>
6、E:invalid伪类选择器与E:valid伪类选择器
1)、E:invalid伪类选择器用来指定，当元素内容不能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容不符合元素规定的格式时的样式。
2)、E:valid伪类选择器用来指定，当元素内容能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容符合元素规定的格式时的样式。
例如
[html] view plain copy
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:invalid伪类选择器与E:valid伪类选择器</title>
<style>
input[type="email"]:invalid{
color: red
}
input[type="email"]:valid{
color: green
}
</style>
</head>
<body>
<h1>E:invalid伪类选择器与E:valid伪类选择器</h1>
<form>
<input type="email" placeholder="请输入邮箱">
</form>
</body>
</html>
7、E:required伪类选择器与E:optional伪类选择器
1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
2)、E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。
[html] view plain copy
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:required伪类选择器与E:optional伪类选择器</title>
<style>
input[type="text"]:required{
background: red
color: #ffffff
}
input[type="text"]:optional{
background: green
color: #ffffff
}
</style>
</head>
<body>
<h1>E:required伪类选择器与E:optional伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" required>
<br/>
<br/>
学校：<input type="text" placeholder="请输入学校">
</form>
</body>
</html>
8、E:in-range伪类选择器与E:out-of-range伪类选择器
1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。
例如
[html] view plain copy
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:in-range伪类选择器与E:out-of-range伪类选择器</title>
<style>
input[type="number"]:in-range{
color: #ffffff
background: green
}
input[type="number"]:out-of-range{
background: red
color: #ffffff
}
</style>
</head>
<body>
<h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1>
<input type="number" min="0" max="100" value="0">
</body>
</html>
CSS伪类用于向特殊状态的选择器添加特殊效果，使用最多的伪类是锚伪类。a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动到链接上,此伪类不止限于超链接上，其他元素也可使用
a:active 选定的链接
注意：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的；a:active 必须被置于 a:hover 之后，才是有效的；伪类名称对大小写不敏感。
伪类的使用是在选择器后添加伪类，如selector:pseudo-class{color:red}, selector.class:pseudo-class{color:red}
注：pseudo-class表示伪类，但并无此伪类，selector表示选择器。
CSS的伪类还有其他几种：
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。IE中必须声明 <!DOCTYPE>，IE8以下不支持。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。IE中必须声明 <!DOCTYPE>。
:lang 向带有指定 lang 属性的元素添加样式。IE中必须声明 <!DOCTYPE>，IE8以下不支持。
CSS中，还有伪元素，形态及使用方法类同伪类。
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。
