CSS学习记录——伪类选择器和伪元素 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <style type="text/css">
    /* 
    伪类专门用来表示元素的一种特殊的状态
    比如：访问过的超链接，聚焦过的文本框
    当我们需要为处在特殊状态的元素设置样式是，可以使用伪类
     */
     /* 
     为没访问过的链接设置一个颜色为绿色
      */
      a:link{
          /* link表示正常链接 */
          color: lightseagreen;
      }
      a:visited{
          /* visited表示访问过的链接 */
          /* 浏览器通过历史记录来判断是否访问过一个链接 */
          color:limegreen;
          /* 由于涉及到用户隐私问题，所以visited伪类，只能设置颜色属性 */
      }
      a:hover{
          /* 鼠标滑过时 */
         color: black;     
      }
      a:active{
          /* 被点击的时候的状态 */
          color: grey;
      }
      /* hover和active也可以为其他元素设置，不仅仅是a元素 （IE6不支持）*/
      input:focus{
          background-color: hotpink;
          /* 获取焦点 */
      }
      p::selection{
          background-color: red;
          /* 
          在火狐中需要使用::-moz-selection{}
         */
      }
      p::first-letter{
          font-size: 90px;
      }
      p::before{
          content:"我会出现最前端";
          color: red;
          /* before、after需要结合content这个元素进行使用 */
      }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">这是一个访问过的链接。</a>
    <br><br>
    <a href="http://www.360.com">这是一个没访问过的链接。</a>
    <br><br>
    <input type="text">
    <p>This is a text aa aa aa aa!!!!</p>
    <p>本段落是用于测试伪元素。</p>
    <!-- 伪元素：表示元素中的一些特殊元素 -->
</body>
</html>

 

posted @ 2020-03-07 17:29  墩墩蹲  阅读(158)  评论(0)    收藏  举报