2025年CSS入门八：伪类的基本使用（伪类概述；伪类与超级链接；伪类在label上的应用；伪类在文本框上的应用）（状态伪类）

科技前沿 • 2025-01-18 16:42 • 阅读 59

大家好，我是讯享网，很高兴认识大家。

1.伪类概述

2.伪类与超级链接

●a:link：超链接未被访问时；

●a:visited：超链接被访问后；

●a:hover：鼠标悬停的情况下。

●a:active：对于超链接来说，激活是指鼠标已经按下了，但还没有松开的状态；

3.伪类在label上的应用

4.伪类在文本框上的应用

1.伪类概述

伪类的作用：伪类是一种“锦上添花”的附带效果，这个可以和其他标签（如超链接，label，文本框等标签）结合使用，使其在显示上体现丰富的效果。

尤其当伪类和超级链接这种标签组合在一起时效果更棒，会使得超链接在显示上更加人性化。

以后提起超级链接，往往也附带着伪类的意思，因为这两者经常结合在一起使用，这可以使页面的超链接在显示上更加人性化；但要时刻明白，这两者完全是两种东西。

讯享网

2.伪类与超级链接

伪类有很多种状态。当伪类应用在超级链接上时：伪类有四种状态：a:link，a:visited，a:hover，a:active；（:focus这个伪类可以用在文本框等标签上）

a不是伪类，a只是超级链接的标签；冒号以后的才是伪类，所有的伪类都是以冒号开头；“:link”是伪类，a:link是实现功能，即当超链接没有被访问时候，应该怎么怎么样；

●a:link：超链接未被访问时；

下面的超链接设置成了，href="#"，即还在本页面上，不用来回切页面了，更方便看效果；

效果：

●a:visited：超链接被访问后；

●a:hover：鼠标悬停的情况下。

（除了超级链接标签可以悬停外，label，input等其他具有悬停效果的标签都可使用":hover"这个伪类）

效果：

●a:active：对于超链接来说，激活是指鼠标已经按下了，但还没有松开的状态；

效果：

……………………………………………………

上述完整代码，包括，index.html，index.css

index.html：

<!DOCTYPE html>
<html>
<head>
	<title>内部样式表演示</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
	<p>http://www.baidu.com</p>
	<p class="p1">百度官网</p>
	<a href="#">伪类</a>    <!--定义个超链接，href="#"代表这个超链接访问本页面-->
</body>
</html>

讯享网

index.css：对于超级链接来说，其四个的状态，必须按照以下的顺序，a:link，a:visited，a:hover，a:active的顺序依次写，否则会失败，实测也是如此。

讯享网a:link{ /*a是标签选择器，即选择了超链接；：link是伪类，代表的是未被选中的情况下 */ color: red; /*超链接标签未被选中时，是红色*/ } a:visited{ color: green; } a:hover{ color: yellow; font-size: 30px; } a:active{ color: blue; }

3.伪类在<label>上的应用

伪类设置：显然，lebel标签，只需要设置悬停就行了，没必要设置其他三个效果；

效果：

4.伪类在文本框上的应用

:focus：获取焦点这个伪类，可以用在文本框上；具体一个标签需要用哪些伪类，既要考虑实际业务场景的需求，也要考虑标签的实际特性；

index.html：

<!DOCTYPE html>
<html>
<head>
	<title>内部样式表演示</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
	<input type="text" name="">   <!--伪类在文本框上的应用-->
</body>
</html>

index.css：

讯享网input:hover{ /*悬停，背景色为红色*/ background-color: red; } input:active{ /* 激活后的颜色为蓝色*/ background-color: blue; } input:focus{ /*获得焦点后的颜色为红色*/ background-color: yellow; }

效果：

2025年CSS入门八：伪类的基本使用（伪类概述；伪类与超级链接；伪类在label上的应用；伪类在文本框上的应用）（状态伪类）

1.伪类概述

2.伪类与超级链接

●a:link：超链接未被访问时；

●a:visited：超链接被访问后；

●a:hover：鼠标悬停的情况下。

●a:active：对于超链接来说，激活是指鼠标已经按下了，但还没有松开的状态；

3.伪类在<label>上的应用

4.伪类在文本框上的应用

相关推荐