CSS——伪元素

最新推荐文章于 2023-07-10 13:48:02 发布

Zjaun

最新推荐文章于 2023-07-10 13:48:02 发布

阅读量405

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.youkuaiyun.com/Zjaun/article/details/87168722

版权

CSS 专栏收录该内容

6 篇文章

订阅专栏

伪元素的简单使用

<style>
      p{
        width:500px;  
      }     
      #p1:first-line{
        color:red;
      }     
      #p2:first-letter{
        font-size:3em;
        font-weight:bold;
      }
    </style>

编写两个`<p>`标签进行演示

<body>
      <p id="p1">詹姆斯在2003年NBA选秀中于首轮第1顺位被克利夫兰骑士队选中，在2009年与2010年蝉联NBA常规赛最有价值球员（MVP）。2010年，詹姆斯转会至迈阿密热火队。2012年，詹姆斯得到NBA个人生涯的第3座常规赛MVP，第1个总冠军和总决赛MVP。并代表美国男篮获得了伦敦奥运会金牌，追平了迈克尔·乔丹在1992年所创的纪录。2013年，詹姆斯获得第4个常规赛MVP、第2个NBA总冠军和第2个总决赛MVP，实现两连冠。2014年，詹姆斯回归骑士。2016年，詹姆斯带领骑士逆转战胜卫冕冠军勇士获得队史首个总冠军和个人第3个总决赛MVP。
      </p>      
      <p id="p2">詹姆斯在2003年NBA选秀中于首轮第1顺位被克利夫兰骑士队选中，在2009年与2010年蝉联NBA常规赛最有价值球员（MVP）。2010年，詹姆斯转会至迈阿密热火队。2012年，詹姆斯得到NBA个人生涯的第3座常规赛MVP，第1个总冠军和总决赛MVP。并代表美国男篮获得了伦敦奥运会金牌，追平了迈克尔·乔丹在1992年所创的纪录。2013年，詹姆斯获得第4个常规赛MVP、第2个NBA总冠军和第2个总决赛MVP，实现两连冠。2014年，詹姆斯回归骑士。2016年，詹姆斯带领骑士逆转战胜卫冕冠军勇士获得队史首个总冠军和个人第3个总决赛MVP。
      </p>
  </body>

在这里插入图片描述

类似按钮的链接

鼠标滑过改变样式

<style type="text/css">
      .like_btn{
        font-size:12px;
        margin-right:8px;
        background-color:#FFFACD; 
        border-bottom:1px solid #aaa;
        border-right:1px solid #aaa;
        padding:5px 10px;
        text-decoration:none;
        color:#000;
      }
      /*增加伪类*/
      a:hover{
        color:red;
        text-decoration:underline;  
      }
    </style>

	<body >
    <a href="#" class="like_btn">全选</a><a href="#" class="like_btn">取消</a><a href="#" class="like_btn">审核</a>
  </body>

在这里插入图片描述

注意

	  a:link {color: #FF0000} /* 未访问过 */
      a:visited {color: #00FF00} /* 已经访问过 */
      a:hover {color: #FF00FF} /*鼠标悬停 */
      a:active {color: #0000FF} /* 选中时 */