伪类选择器 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>伪类选择器</title>
        <style type="text/css">
            /*
              伪类专用来表示元素的一种特殊状态
              需要为处在特殊状态的元素设置样式
              伪类四个样式
                 -link 正常链接(没访问过的链接)
                 -visited 访问过的链接
                    由于涉及用户隐私，使用visited伪类只能设置字体颜色
                 -hover 鼠标滑过的链接  }可以对其他元素进行设置
                 -active 正在点击的链接 }
                 - focus 获取焦点
                 - before 指定元素前
                 - after 指定元素后
                 - ::selection 选中的元素(该伪类在火狐中需要另一种编写方式)
                 - :: -moz-selection
            */
           /*
              为没访问过的链接设置绿色
              
              浏览器根据历史记录判断链接是否被访问过
           */
          a:link{
            color: yellowgreen;  
          }
          a:visited{
              color: red;
          }
          a:hover{
              color: blue;
          }
          a:active{
              color: black; 
          }
           /* p:hover{
               background-color: yellow;
           }
           p:active{
               background-color: blue;
           }
           
           input:focus{
               background-color: yellow;
           } */
           
           p::selection{
               background-color: yellow;
           }
           
           
           
        </style>
    </head>
    <body>
        <a class="a" href="http://www.baidu.com">访问过的超链接</a>
        <br />
        <br />
        <a class="b" href="http://www.baidu111.com">未访问过超链接</a>
        <p>阿拉斯加打卡机收到了</p>
        
        <input type="text" name="" id="" value="" />
    </body>
</html>

伪类：表示元素一种特殊状态

:link 正常链接（没访问过的链接）

:visited 访问过的链接（由于涉及用户隐私，使用visited伪类只能设置字体颜色）

:hover 鼠标划过的链接}}}}}}

：active 正在点击的链接}}}}}}以上两种伪类可以对其他元素进行设置

：focus 获取焦点

：before 指定元素前

：after 指定元素后

::selection 选中的元素（该伪类在火狐上需要另一种编写模式   ：：-moz-selection）

浏览器根据历史记录判断链接是否被访问过

 

posted @ 2021-06-29 17:14  2237774566  阅读(53)  评论(0)    收藏  举报