CSS学习笔记--伪类

最新推荐文章于 2024-10-16 17:22:22 发布

PRCORANGE

最新推荐文章于 2024-10-16 17:22:22 发布

阅读量137

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/PRCORANGE/article/details/107834622

版权

CSS伪类是用来添加一些选择器的特殊效果。由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

语法

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}

anchor伪类

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

伪类可以与 CSS 类配合使用：

a.red:visited {color:#FF0000;}       
<a class="red" href="css-syntax.html">CSS Syntax</a>

first - child伪类

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>PRCORANGE</title> 
<style>
p:first-child
{
	color:blue;
} 
</style>
</head>

<body>
<p>This is some text.</p>
<p>This is some text.</p>
</body>
</html>