前端基础之六 伪类元素和伪类选择器

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;

}