CSS伪类

最新推荐文章于 2025-06-08 14:44:46 发布

IUNIQUE

最新推荐文章于 2025-06-08 14:44:46 发布

阅读量674

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 伪类

本文链接：https://blog.youkuaiyun.com/IUNIQUE/article/details/55190418

css 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了CSS中的伪类及其使用方法，包括超链接伪类如a:link、a:visited等，并强调了它们的正确使用顺序。此外还介绍了子对象选择符及first-child和lang等其他伪类的应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来介绍下伪类的语法
选择器：伪类{属性：值……..}
锚伪类（超链接伪类）
1、a:link{属性：值…….} /未访问的链接/
2、a:visited{属性：值…….} /已访问的链接/
3、a:hover{属性：值………} /鼠标移动到链接上/
4、a:active{属性：值……….} /鼠标选定的链接，即鼠标按住的链接/
注意：a:hover必须被置于a:link和a:visited之后。a:activited必须被置于a:hover之后。
子对象选择符

boby>p{font-size:14px;color:red}   /*大于号的作用是指body里面所有的段落标签都是字体大小为14像素，颜色为红色*/

其他伪类
first-child、left、right、lang、focus
下面是两个其他伪类的例子：
1、first-child伪类的用法：

<html>
<head>
<title>first-child用法</title>
<style type="text/css">
p:first-child{color:red;}   /*表示第一个子段落的颜色为红色*/
<style>
</head>
<body>
<p>firstTime</p>
<p>firstTime</p>
</body>
</html>

2、lang伪类的用法：

<html>
<head>
<title>first-child用法</title>
<style type="text/css">
q:lang(no){quotes:"~" "~";color:red;}
<style>
</head>
<body>
<p>文字<q lang="no">段落中引用的文字</q>文字</p>
</body>
</html>