什么是伪类？

伪类用于定义元素的特殊状态。 例如，它可用于：

• 当用户将鼠标悬停在元素上时为其设置样式
• 访问和未访问的链接不同样式
• 在获得焦点时设置元素的样式

伪类的语法

后代选择器匹配作为指定元素后代的所有元素。以下示例选择<div>元素内的所有<p>元素：

选择器:伪类 {     属性:值;   }

链接可以以不同方式显示：

/* 未访问的链接 */ 
a:link {   color: red; } 
/* 已浏览过的链接 */ 
a:visited {   color: green; } 
/* 鼠标悬停时候的链接 */ 
a:hover {   color: hotpink; } 
/* 选定的链接 */ 
a:active {   color: blue; }

注意：a:hover必须在CSS定义a:link之后和a:visited之后才能生效！a:active必须 a:hover在CSS定义之后才能有效！伪类名称不区分大小写。

伪类和CSS类

伪类可以与CSS类结合使用：当您将鼠标悬停在示例中的链接上时，它将更改颜色：

a.highlight:hover {   color: #ff0000; }

将鼠标悬停在<div>上

:hover在<div>元素上使用伪类的示例：

div:hover {   background-color: blue; }

简单的工具提示悬停

将鼠标悬停在<div>元素上以显示<p>元素（如工具提示）

p {   
display: none; 
background-color: yellow;  
padding: 20px; 
} 
div:hover p { 
display: block;
}

:first-child伪类

:first-child伪类指定的元素是另一个元素的第一个子匹配。 在以下示例中，选择器匹配任何元素的第一个子元素<p>元素：

p:first-child {   color: blue; }

匹配所有<p>元素中的第一个<i>元素

p i:first-child {   color: blue; }

匹配所有第一个子<p>元素中的所有<i>元素

p:first-child i {   color: blue; }

:lang伪类

:lang伪类允许定义不同语言的特殊规则。在下面的示例中，:lang使用lang=“no”定义<q>元素的引用：

q:lang(no) {   quotes: "~" "~"; }

所有CSS伪类

所有CSS伪元素