<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/**
* 伪类：
* 用来表示元素的一种特殊状态
* 比如：访问过超链接，普通的超链接，获取焦点的文本框
* 当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
涉及到a的伪类一共有四个，这四个优先级一致，顺序 love hate
：link
：visited
:hover
:active
* */
/**
* 为没访问过的链接设置一个颜色为绿色
* :link，表示普通的链接（没访问过的链接）
* */
a:link{
color: yellowgreen;
}
/**
* 为访问过的链接设置一个颜色为红色
* :visited，表示访问过的链接（没访问过的链接）
* 浏览器通过历史记录来判断一个链接是否访问过
* 由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
* */
a:visited{
color: red;
}
/**
* :hover伪类表示鼠标移入的状态
* */
a:hover{
color: skyblue;
}
/**
* :active表示超链接被点击的状态
* */
a:active{
color: black;
}
/**
* hover active 也可以为其他元素设置
* IE6中，不支持对超链接以外的元素设置:hover 和 :active
*/
p:hover{
background-color: yellow;
}
p:active{
background-color: orange;
}
/**
* 其他伪类
* 获取焦点：:focus
* 指定元素前：:before
* 指定元素后：:after
* 选中的元素：::selection
* */
input:focus{
background-color: yellow;
}
/**
* 为p标签中选中的内容使用样式
* ::selection
* 火狐中：-moz-selection
* */
//兼容大部分浏览器
p::selection{
background-color: orange;
}
p::-moz-selection{
background-color: orange;
}
</style>
</head>
<body>
<a href="http://www.baidu.com"> 访问过的链接</a>
<br />
<a href="http://www.123456baidu.com"> 访问过的链接</a>
<p>我是一个段落</p>
<!--使用input创建一个文本输入框-->
<input type="text" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/**
* 伪类：
* 用来表示元素的一种特殊状态
* 比如：访问过超链接，普通的超链接，获取焦点的文本框
* 当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
* */
/**
* 为没访问过的链接设置一个颜色为绿色
* :link，表示普通的链接（没访问过的链接）
* */
a:link{
color: yellowgreen;
}
/**
* 为访问过的链接设置一个颜色为红色
* :visited，表示访问过的链接（没访问过的链接）
* 浏览器通过历史记录来判断一个链接是否访问过
* 由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
* */
a:visited{
color: red;
}
/**
* :hover伪类表示鼠标移入的状态
* */
a:hover{
color: skyblue;
}
/**
* :active表示超链接被点击的状态
* */
a:active{
color: black;
}
/**
* hover active 也可以为其他元素设置
* IE6中，不支持对超链接以外的元素设置:hover 和 :active
*/
p:hover{
background-color: yellow;
}
p:active{
background-color: orange;
}
/**
* 其他伪类
* 获取焦点：:focus
* 指定元素前：:before
* 指定元素后：:after
* 选中的元素：::selection
* */
input:focus{
background-color: yellow;
}
/**
* 为p标签中选中的内容使用样式
* ::selection
* 火狐中：-moz-selection
* */
//兼容大部分浏览器
p::selection{
background-color: orange;
}
p::-moz-selection{
background-color: orange;
}
</style>
</head>
<body>
<a href="http://www.baidu.com"> 访问过的链接</a>
<br />
<a href="http://www.123456baidu.com"> 访问过的链接</a>
<p>我是一个段落</p>
<!--使用input创建一个文本输入框-->
<input type="text" />
</body>
</html>
否定伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>否定伪类</title>
<style type="text/css">
/**
* 为所有的p元素设置一个背景颜色为黄色，除了class值为hello的
*
* 否定伪类：
* 可以从已选中的元素中剔除出某些元素
* 语法：
* ：not(选择器)
* */
p:not(.hello){
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p class="hello">我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>
