1.伪类选择器
- 伪类专门表示元素的一种特殊状态。比如：访问过的超链接，普通的超链接，获取焦点的文本框等等。
- 当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类。
假设百度的链接已访问过。如下为默认的样式（访问过和未访问过的区别）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
<br/><br/>
<a href="http://www.baidu111abc.com">未访问过的链接</a>
</body>
</html>结果：
未访问过的颜色偏蓝色。
:link
表示普通的链接（没访问过的链接）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
* 为未访问过的链接设置成绿色并设置大小
*/
a:link{
color: greenyellow;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
<br/><br/>
<a href="http://www.baidu123abc.com">未访问过的链接</a>
</body>
</html>结果：
将未访问过的链接颜色设置成了绿色
疑问：当用link来为a标签设置其他属性时，访问过的和未访问过的链接结果就没有了区别，为什么呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
a:link{
background-color: greenyellow;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
<br/><br/>
<a href="http://www.baidu123abc.com">未访问过的链接</a>
</body>
</html>结果：a标签下都被设置了样式。而没有了访问与未访问的区别。
:visited
表示访问过的链接
注意： 浏览器是通过历史纪录来判断一个链接是否被访问过。由于涉及用户的隐私问题，使用visted伪类只能设置字体的颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
* 为访问过的链接设置成红色
*/
a:visited{
color: red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
<br/><br/>
<a href="http://www.baidu111abc.com">未访问过的链接</a>
</body>
</html>结果：
将访问过的链接设置成红色。
:hover
表示鼠标移入的状态。
如下当鼠标移入时，颜色会变为红色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
a:hover{
color: red;
}
p:hover{
background-color: greenyellow;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
<br/><br/>
<a href="http://www.baidu111abc.com">未访问过的链接</a>
<p>我是一个段落</p>
</body>
</html>:active
表示的是超链接被点击的状态。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
a:active{
color: black;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
<br/><br/>
<a href="http://www.baidu111abc.com">未访问过的链接</a>
<p>我是一个段落</p>
</body>
</html>注意：
- ：hover和：active也可以为其他元素设置。
- IE6中，不支持对超链接以外的元素设置：hover和：active。
小结：
对于a的伪类，一般按照link visited hover active 从上到下的顺序写，否则会出现覆盖的问题或者不起作用的问题。
:focus
获取焦点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/* 文本框获取焦点以后，修改背景颜色为黄色*/
input:focus {
background-color: greenyellow;
}
</style>
</head>
<body>
<!-- 使用input可以创建一个文本输入框-->
<input type="text">
</body>
</html>结果： 当光标在文本框内时，获取到焦点，颜色为黄色。
::selection
选中的元素
注意：这个伪类在火狐浏览器中需要采用另外一种方式：-moz-selection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/* 为在p标签中选中的内容设置样式*/
/* 兼容大部分浏览器*/
p::selection {
background-color: greenyellow;
}
/* 兼容大部分浏览器*/
p::-moz-selection {
background-color: greenyellow;
}
</style>
</head>
<body>
<p>我是一个段落</p>
</body>
</html>结果：用鼠标选中p中的'段落'内容，选中的内容改变了样式。
2. 否定伪类
:not(选择器)
作用：可以从已选中的元素中剔除出某些元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/* 为所有的p元素设置背景颜色为黄色，除了class值为hello */
p:not(.hello){
background-color: yellowgreen;
}
</style>
</head>
<body>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p class="hello">我是一个段落</p>
</body>
</html>结果：为除过class值为hello的p元素设置了背景颜色。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。