CSS伪类伪元素_ergo css-CSDN博客

本文链接：https://blog.csdn.net/qq_39007083/article/details/103818853

仅供参考，如需指正请您联系我

一伪类

1.作用

用于向某些选择器添加特殊的效果

2.语法

selector : pseudo-class {property: value}

3.举例锚伪类

代码

<html>
<head>
	<style type="text/css">
	a:link {color: #FF0000}		/* 未访问的链接 */
	a:visited {color: #00FF00}	/* 已访问的链接 */
	a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
	a:active {color: #0000FF}	/* 选定的链接 */
	</style>
</head>
<body>
	
	<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
	<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
	<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
	
</body>
</html>

效果

4.常用的伪类

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

二伪元素

1.作用

用于向某些选择器设置特殊效果

2.语法

selector:pseudo-element {property:value;}

3.举例改变段落第一行的元素样式

代码

<html>
<head>
    <style type="text/css">
        p:first-line
        {
            color: #ff0000;
            font-variant: small-caps
        }
    </style>
</head>

<body>
<p>
    我是第一行<br>
    我是第二行
</p>
</body>

</html>

效果

4.常用的伪元素

属性	描述
:first-letter	向文本的第一个字母添加特殊样式
:first-line	向文本的首行添加特殊样式
:before	在元素之前添加内容
:after	在元素之后添加内容