＜a＞标签和四个伪类选择器

Timmtiy

于 2023-04-12 15:30:18 发布

阅读量219

点赞数

分类专栏：前端文章标签： css html css3

本文链接：https://blog.csdn.net/timmtiy/article/details/130108528

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

标签和四个伪类选择器

伪类概念：
- 普通的类：必须给标签设置对应的class属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器之上。
- 伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户出发了对应行为，伪类的样式才会立即加载。
- 伪类选择器的权重与普通的类选择器相同
- 伪类选择器的写法：前面是普通的选择器，后面紧跟 :伪类名。

<a>标签可以根据用户行为不同，划分为四种状态，通过<a>标签的伪类可以将四种状态选中设置为不同样式效果，用户出发对应行为，就可以加载对应的样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 访问前 */
    a:link {
      color: #333;
    }
    /* 访问后 */
    a:visited {
      color: #0f0;
    }
    /* 鼠标悬停 */
    a:hover {
      color: #f00;
    }
    /* 鼠标点击 */
    a:active {
      color: #00f;
    }
  </style>
</head>
<body>
  <a href="<http://www.baidu.com>">超级链接</a>
</body>
</html>

<a>标签上可能会同时出发2到3个状态，每个状态的属性都会进行加载，相同的属性之间会发生层叠，伪类的权重相同，只能根据书写顺序，后写的层叠先写的，所以为了每个伪类正常加载，书写顺序必须是：link、visited、hover、active。
实际应用:
- 一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标悬停和点击效果。
```
a:link,a:visited {
      color: #333;
}
```
- 常用用法：<a>标签任何普通的选择器，可以同时选中四种状态，可以将四种状态设置为相同的样式，属性可以设置所有的<a>默认显示样式的属性，包括盒模型，文字等。再用a:hover伪类选择器层叠鼠标悬停样式。
```
a {
    width: 200px;
    height: 50px;
    background-color: skyblue;
    font: 18px/50px "微软雅黑";
    text-align: center;
    text-decoration: none;
    color: #ff0;
  }
  a:hover {
    background-color: yellowgreen;
    color: #f00;
  }
```

Timmtiy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
＜a＞标签和四个伪类选择器

a>标签上可能会同时出发2到3个状态，每个状态的属性都会进行加载，相同的属性之间会发生层叠，伪类的权重相同，只能根据书写顺序，后写的层叠先写的，所以为了每个伪类正常加载，书写顺序必须是：link、visited、hover、active。标签可以根据用户行为不同，划分为四种状态，通过标签的伪类可以将四种状态选中设置为不同样式效果，用户出发对应行为，就可以加载对应的样式。/* 鼠标悬停 *//* 鼠标点击 */
复制链接

扫一扫