1、a的伪类
案例:设置访问过的链接为红色,用户有没有访问过,我们可以通过浏览器的用户历史记录识别。
(1)a:visited 设置已经访问过的链接的文字,但是只能为字体设置颜色,而不能设置其他样式。
(2)a:link 表示没有访问过的正常的链接
(3)a:hover 设置当鼠标移入到超链接上时,超链接的文字的状态
(4)a:active 当鼠标点击超链接(但是不松开)时,超链接的文字的状态
当我们通过a的伪类为超链接设置样式时,它这些选择器的优先级都是一样的。
这样就会带来一个问题,永远会优先显示靠下的样式。
注意,编写a的伪类时,注意顺序。
link>visited>hover>active
2、获取焦点的伪类
(1) :focus 设置获取焦点以后的伪类
案例:设置文本框获取焦点以后的样式 input:focus{}
(2) :before 可以选定指定元素前边的部分
案例:设置在段落前边内容的部分 ,(但是仍在p标签内部)
p:before{
content:"我会出现在段落的最前边";
}如图
(3) :after 可以选定指定元素后边的部分
案例:设置在段落后边内容的部分 ,(但是仍在p标签内部)
p:after{
content:"我会出现在段落的最后边";
}如图
注:content后面还可以插入一个图片,如content:url(tian.img); 相对路径
(4) ::selection 可以设置文字选中的结果。
案例:设置选中的文字背景为黄色
火狐浏览器(只支持):
p::-moz-selection{
background-color:yellow;
}
chrome浏览器(只支持):
p::selection{
background-color:yellow;
}