CSS伪类

2020/11/03 13:16
阅读数 12

语法

标签名:伪类名{声明;}

伪类选择元素基于的是当前元素处于的状态。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。

各种属性

属性 描述
:active 向被激活的元素添加样式
:focus 向拥有键盘输入焦点的元素添加样式
:hover 当鼠标悬浮在元素上方时,向元素添加样式
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:first-child 向元素的第一个子元素添加样式
:lang 向带有指定 lang 属性的元素添加样式

样例

:hover 伪类将应用于有鼠标指针悬停于其上的元素。

a:hover 
{

color:#B46210;

text-decoration:underline;

}

样例代码:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			a {
    
    
				text-decoration: none;
			}

			a:hover {
    
    
				text-decoration: underline;
				color: red;
			}

			p:hover {
    
    
				font-size: 20px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<a href="#">牛哄哄的柯南</a>
		<p>Keafmd</p>
	</body>
</html>

效果截图:
在这里插入图片描述

从上面的动图我们可以很明显的看出点击前后的区别,这就是:hover 伪类的作用

其它伪类的使用↓

样例代码2:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a{
    
    
			    text-decoration: none;
			}
			a:visited{
    
    
			    color:#C8C8C8;
			}
			a:hover{
    
    
			    color:#ec7814;
			}
			a:link{
    
    
			    color:#C8C8C8;
			}
			
			li:first-child{
    
    
			    color:green;
			}
			li:last-child{
    
    
			    color:red;
			}
			li:nth-child(3){
    
    
			    color:pink;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com"  >百度</a>
		
		<ul>
		    <li>结构性伪类选择符 1</li>
		    <li>结构性伪类选择符 2</li>
		    <li>结构性伪类选择符 3</li>
		    <li>结构性伪类选择符 4</li>
		    <li>结构性伪类选择符 5</li>
		    <li>结构性伪类选择符 6</li>
		    <li>结构性伪类选择符 7</li>
		</ul>    
	</body>
</html>

效果截图:
在这里插入图片描述

通过这个样例,我们应该更加清楚了这些伪类的使用

注意

1.在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
2.在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
3.伪类的名称不区分大小写。

写作不易,读完如果对你有帮助,感谢点赞支持!
如果你是电脑端,看见右下角的“一键三连”了吗,没错点它[哈哈]

在这里插入图片描述
加油!

共同努力!

Keafmd

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部