CSS如何使用:link伪类

66次阅读
没有评论

在CSS中,:link 伪类可以用于选取页面中所有尚未被访问过的链接,并对其应用指定的样式。以下是在CSS中使用:link 伪类的示例:

a:link {
  color: blue;
  text-decoration: underline;
}

在这个示例中,a:link 选择器选取了所有尚未被访问过的链接,并对它们应用了蓝色文本颜色和下划线文本装饰。

下面是一个完整的HTML5页面示例,包括 <head> 部分中设置字符集为UTF-8的 <meta> 元素和一个包含两个链接的 <body> 部分。这个页面使用了上述CSS样式来设置链接样式:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example Page</title>
    <style>
      a:link {
        color: blue;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to Example Page</h1>
    <p>Here are some links:</p>
    <ul>
      <li><a href="https://www.google.com">Google</a></li>
      <li><a href="https://www.yahoo.com">Yahoo</a></li>
    </ul>
  </body>
</html>

在这个示例中,<meta> 元素用于设置页面的字符集为UTF-8,这可以确保浏览器正确解析页面中的非ASCII字符。<style> 元素用于将上述CSS样式应用于页面中的链接。<body> 元素包含了两个链接,它们会受到CSS样式的影响。

正文完
 
评论(没有评论)