CSS学习笔记（9）【a标签伪类选择器】

最新推荐文章于 2022-02-28 10:08:28 发布

Ocean！！

最新推荐文章于 2022-02-28 10:08:28 发布

阅读量305

点赞数 1

分类专栏：前端入门学习笔记文章标签： css html

本文链接：https://blog.csdn.net/qq_51368103/article/details/114840051

版权

前端入门学习笔记专栏收录该内容

23 篇文章 1 订阅

订阅专栏

CSS基础学习：

a标签伪类选择器：

1. 观察发现a标签具有不同的状态：

1.1 默认状态，未被访问 link
1.2 被访问过的状态 visited
1.3 鼠标长按的状态 active
1.4 鼠标悬停的状态 hover

2. 什么是a标签的为类选择器？

专门用来修改a标签不同状态的样式的

格式：

<style>
	a:link{
		color:skyblue;
	}
	a:visited{
		color:green;
	}
	a:active{
		color:orange;
	}
	a:hover{
		color:pink;
	}
</style>

3. a标签伪类选择器注意点:

（1）a标签的伪类选择器可以单独出现也可以同时；
（2）a标签的为类选择器如果可以一起出现，有严格的书写顺序：
需按照：1. link
2. visited
3. hover
4. active
（3）如果默认状态的样式和被访问过的状态一样，那么可以缩写

a标签伪类选择器简单练习——导航条：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签伪类选择器简单练习</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      width: 960px;
      height: 40px;
      background-color: skyblue;
      margin: 100px auto;
    }
    ul li{
      list-style: none;
      width: 120px;
      height: 40px;
      float: left;
      background-color: green;
      text-align: center;
      line-height: 40px;
    }
    ul li a{
      width: 120px;
      height: 40px;
      display: inline-block;
    }
    ul li a:link{
      color: white;
      text-decoration: none;
    }
    ul li a:hover{
      color: red;
      background-color: #adadad;
    }
    ul li a:active{
      color: yellow;
    }
  </style>
</head>
<body>
<ul>
  <li><a href="#">我是导航1</a></li>
  <li><a href="#">我是导航2</a></li>
  <li><a href="#">我是导航3</a></li>
  <li><a href="#">我是导航4</a></li>
  <li><a href="#">我是导航5</a></li>
  <li><a href="#">我是导航6</a></li>
  <li><a href="#">我是导航7</a></li>
  <li><a href="#">我是导航8</a></li>
</ul>
</body>
</html>

PS：
（1）在企业开发中，编写a标签的伪类选择器最好写在标签选择器的后面
（2）在企业开发中和a标签盒子相关的属性都写在标签选择器中（显示模式/宽度/高度/padding/margin）
（3）在企业开发中，和a标签文字/背景相关的都写在伪类选择器中

Ocean！！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记（9）【a标签伪类选择器】

CSS基础学习：a标签伪类选择器：1. 观察发现a标签具有不同的状态：1.1 默认状态，未被访问 link1.2 被访问过的状态 visited1.3 鼠标长按的状态 active1.4 鼠标悬停的状态 hover2. 什么是a标签的为类选择器？专门用来修改a标签不同状态的样式的格式：<style> a:link{ color:skyblue; } a:visited{ color:green; } a:active{ color:orange
复制链接

扫一扫