CSS 基础学习-162 CSS 使用伪类对链接的状态进行颜色设置

由 hrs, 12 二月, 2022

什么是伪类？

伪类用于定义元素的特殊状态。

例如，它可以用于：

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式

实例代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      a{  
        font-size:20px;
      }   
      a:link{
        color:red;
      }   
      a:visited{
        color:green;
      }   
      a:hover{
          color:pink;
        }
      a:active{
        color:blue; 
      }   
    </style>
  </head>
  <body>
    <h1>css 链接</h1>
    <a href="https://www.dwoke.com" target="_blank">这是一个链接</a>
    <p><b>注释：</b>在css定义中，a:hover必须位于a:link和a:visited之后才能生效。</p>
    <p><b>注释：</b>在css定义中，a:active必须位于a:hover之后才能生效。</p>
  </body>
</html>

运行效果：

css-162.png

标签

评论