伪类
伪类专门用来表示元素的一种特殊状态，跟伪元素有点像 一般用于为这些特殊状态的超链接设置样式
比如 访问过的超链接 获取焦点的文本框 普通的超链接
伪类选择器
选择伪类 多用于给连接设置样式
link
用于设置未点击过的链接的颜色
语法 a:link{}
a:link{
color: red;/*设置未点击过的链接的颜色*/
}
visited
语法 a:visited{}
visited设置点击过的链接的颜色
为保证用户的隐私 只能设置字体的颜色
浏览器根据根据历史记录来判断你是否点击过链接
a:visited{
color: black;/* :visited设置点击过的链接的颜色
为保证用户的隐私 只能设置字体的颜色*/
}
hover
语法 a:hover{} 或 h1:hover{}
设置鼠标移入时链接的颜色 也可用于文本
a:hover{
color: green;/* :hover设置鼠标移入时链接的颜色*/
}
/*改变鼠标移入文本时 文本改变颜色*/
h1:hover{
color: red;
}
active
语法 a:active{} 或 h1:active{}
设置超链接被点击时的颜色 也可用于文本
a:active{
color: darkgoldenrod;/*设置超链接被点击时的颜色*/
}
/*改变文本被点击颜色*/
h1:active{
color: darkgoldenrod;
}
/*hover和active不止是a可以使用 其他的比如p或者h都可以使用*/
focus
语法 input:focus{}
使用input可以创建一个文本输入框
focus可以获取焦点 focus选定文本框获取到焦点后的状态 借此设计此状态下文本框的背景颜色 和字体颜色。。。。
input:focus{
background: green;
color: red;
}/* focus设置文本框背景颜色 和字体颜色。。。。*/
selection
语法 h2::selection{}
selection可选定文本被鼠标选中的内容的状态 即 这个状态就是平时咱鼠标选中文本内容文本内容背景变蓝时候的状态 借此设计选中时文本的样式
h2::selection{
color: royalblue;
background: olive;
}/* selsection设置当鼠标选中内容时 内容的颜色和背景*/
body代码
<body>
<h1>劳资跳起来</h1>
<a href="第二个网站.html">百度</a><hr />
<a href="#">lianjie</a><br>
<input type="text" /> <!-- 文本框 --><br>
<h2>劳资</h2>
</body>
总代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style type="text/css">
a:link{
color: red;/*设置未点击过的链接的颜色*/
}
a:visited{
color: black;/* :visited设置点击过的链接的颜色
为保证用户的隐私 只能设置字体的颜色*/
}
/*浏览器根据根据历史记录来判断你是否点击过链接*/
a:hover{
color: green;/* :hover设置鼠标移入时链接的颜色*/
}
a:active{
color: darkgoldenrod;/*设置超链接被点击时的颜色*/
}
h1:hover{
color: red;
}
h1:active{
color: darkgoldenrod;
}
/*hover和active不止是a可以使用 其他的比如p或者h都可以使用*/
input:focus{
background: green;
color: red;
}/* focus设置文本框背景颜色 和字体颜色。。。。*/
h2::selection{
color: royalblue;
background: olive;
}/* selsection设置当鼠标选中内容时 内容的颜色和背景*/
</style>
</head>
<body>
<h1>劳资跳起来</h1>
<a href="第二个网站.html">百度</a><hr />
<a href="#">lianjie</a><br>
<input type="text" /> <!-- 文本框 --><br>
<h2>劳资</h2>
</body>
</html>