你好赵伟

这个屌丝很懒，什么也没留下！

热门标签

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

作者：你好赵伟 | 2024-07-18 13:43:59

踩

伪类

●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;
}

效果：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/845971