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

    xiaoxiao2021-03-25  101

    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;

    }

    转载请注明原文地址: https://ju.6miu.com/read-18177.html

    最新回复(0)