CSS 伪类-一一网

语法

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

复制代码

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

各种属性

下表：

属性	描述
: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>


复制代码

效果截图：