CSS-5.1-伪类选择器

最新推荐文章于 2023-04-16 16:38:51 发布

anh_qwh

最新推荐文章于 2023-04-16 16:38:51 发布

阅读量375

点赞数 2

分类专栏： WEB前端 CSS 文章标签： CSS伪类选择器超链接伪类选择器静态伪类动态伪类

本文链接：https://blog.csdn.net/QWH_PYTHON/article/details/100658654

版权

WEB前端同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

CSS

19 篇文章 0 订阅

订阅专栏

CSS-5.1-伪类选择器

一：伪类选择器
- 1、静态伪类
- 2、动态伪类
二：超链接a标签
- 1、超链接的四种状态
- 2、a{}和a:link{}的区别

一：伪类选择器

伪类：
- 同一个标签，根据其不同的状态，有不同的样式
伪类用冒号来表示

伪类选择器分为两种
1.静态伪类：只能用于超链接的样式
2.动态伪类：针对所有标签都适用的样式

1、静态伪类

静态伪类：只能用于超链接的样式
- :link：点击超链接之前
- :visited：超链接被访问过后

2、动态伪类

动态伪类：针对所有标签都适用的样式
- :hover：鼠标悬停到标签的时候
- :active：鼠标点击标签不松手的时候
- :focus：是某个标签获得焦点时的样式(比如某个输入框获得焦点)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动态伪类选择器</title>
	<style type="text/css">
		/* 
		让文本框获得焦点时
		边框：3像素蓝色实线
		字体颜色：白色
		文本框背景：红色
		 */
		input:focus{
			border: 3px solid blue;
			color: white;
			background-color: red;
		}
		/*
		鼠标悬停在标签上时显示蓝色
		*/
		label:hover{
			color: blue;
		}
		/*
		点击标签未松鼠标时显示红色
		*/
		label:active{
			color: red;
		}
	</style>
</head>
<body>
	请输入姓名：
	<input type="text" name="text"> <br>
	<label>提交</label>
</body>
</html>

效果动态图
在这里插入图片描述

二：超链接a标签

1、超链接的四种状态

:link：点击超链接之前
:visited：超链接被访问过后
:hover：鼠标悬停到标签的时候
active：鼠标点击标签不松手的时候

注意事项
1.在CSS中，超链接的四种状态必须按照固定的顺序写
2.如果不按照顺序，那么将失效

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>超链接伪类选择器</title>
	<style type="text/css">
		/* 未点击超链接时是红色 */
		a:link{
			color: red;
			text-decoration: none;
		}
		/* 点击超链接之后是橙色 */
		a:visited{
			color: orange;
		}
		/* 鼠标悬停未点击时是绿色 */
		a:hover{
			color: green;
		}
		/* 鼠标点击未松手时是黑色 */
		a:active{
			color: black;
		}
	</style>
</head>
<body>
	<a href="http://www.4399.com" target="_blank">大型游戏</a>
</body>
</html>