二维码
搜索 ×

CSS 伪类

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

CSS 伪类

什么是伪类？

伪类用于定义特殊状态 元素。

例如，它可用于：

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

语法

伪类的语法：

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

锚点伪类

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

1
2
3
4
5
6
7
8
9
10
11
/* unvisited link */  
a:link {  color: #FF0000;}  

/* visited link */  
a:visited {  color: #00FF00;}  

/* mouse over link */  
a:hover {  color: #FF00FF;}  

/* selected link */  
a:active {  color: #0000FF;}

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

伪类和 HTML 类

伪类可以与 HTML 类结合使用：

当您将鼠标悬停在示例中的链接上时，它将改变颜色：

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

将鼠标悬停在 <div> 上

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

1
div:hover {  background-color: blue;}

简单的工具提示悬停

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

将鼠标悬停在我上方以显示 <p> 元素。

1
2
3
4
5
p {  display: none;  
  background-color: yellow;  
  padding: 20px;}  

div:hover p {  display: block;}

CSS - ：first-child 伪类

伪类匹配指定的元素，该元素是另一个元素的第一个子元素。:first-child

匹配第一个 <p> 元素

在以下示例中，选择器匹配作为任何元素的第一个子元素的任何 <p> 元素：

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

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

在以下示例中，选择器匹配所有 <p> 元素中的第一个 <i> 元素：

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

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

在以下示例中，选择器匹配 <p> 元素中的所有 <i> 元素，这些元素是另一个元素的第一个子元素：

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

CSS - ：lang 伪类

伪类允许您为不同的语言定义特殊规则。:lang

在下面的示例中，使用 lang=“no” 定义<q>元素的引号：:lang

1
2
3
4
5
6
7
8
9
10
11
12
<html>  
<head>  
<style>  
q:lang(no) {  quotes: "~" "~";}  
</style>  
</head>  
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>  
</html>

更多示例

向超链接添加不同的样式：

使用 ：focus 此示例演示如何使用：

所有 CSS 伪类

选择器 示例 说明
:active a:active 选择活动链接
:checked input:checked 选择每个选中的 <input>
:disabled input:disabled 选择每个禁用的<input>
:empty p:empty 选择每个<p>没有子元素的 ‘’ 元素
:enabled input:enabled 选择每个启用的<input>元素
:first-child p:first-child 选择<p>作为其父元素的第一个子元素的每个  元素
:first-of-type p:first-of-type 选择<p>作为其父元素的第一个 元素的每个 <p>元素
:focus input:focus 选择具有焦点的 <input> 元素
:hover a:hover 鼠标悬停时选择链接
:in-range input:in-range 选择<input>值在指定范围内的元素
:invalid input:invalid 选择所有<input>具有无效值的 ‘’ 元素
:lang(language) p:lang(it) 选择每个 <p>元素，其 lang 属性值以 “it” 开头
:last-child p:last-child 选择<p>作为其父元素的最后一个子元素的每个 元素
:last-of-type p:last-of-type 选择<p>作为其父元素的最后一个 ‘’ 元素的每个 ‘’ <p>元素
:link a:link 选择所有未访问的链接
:not(selector) :not(p) 选择不是 元素的每个<p>元素
:nth-child(n) p:nth-child(2) 选择<p>作为其父元素的第二个子元素的每个元素
:nth-last-child(n) p:nth-last-child(2) 选择作为其父元素的第二个子元素的每个 <p> 元素，从最后一个子元素开始计数
:nth-last-of-type(n) p:nth-last-of-type(2) 选择作为其父元素的第二个 ‘’ 元素的每个 <p><p>元素，从最后一个子元素开始计数
:nth-of-type(n) p:nth-of-type(2) 选择<p>作为<p>其父元素的第二个元素的每个 元素
:only-of-type p:only-of-type 选择作为其父元素的唯一元素的每个 <p> 元素
:only-child p:only-child 选择作为<p>其父元素的唯一子元素的每个元素
:optional input:optional 选择<input>没有“必需”属性的元素
:out-of-range input:out-of-range 选择<input>值超出指定范围的元素
:read-only input:read-only 选择<input>指定了“readonly”属性的元素
:read-write input:read-write 选择<input>没有“readonly”属性的元素
:required input:required 选择<input>指定了“required”属性的元素
:root root 选择文档的根元素
:target #news:target 选择当前活动的 #news 元素（单击包含该锚点名称的 URL）
:valid input:valid 选择所有<input>具有有效值的元素
:visited a:visited 选择所有访问过的链接

所有 CSS 伪元素

选择器 示例 说明
::after p::after 在每个元素后插入内容<p>
::before p::before 在每个元素之前插入内容<p>
::first-letter p::first-letter 选择每个元素的首字母<p>
::first-line p::first-line 选择每个 <p>元素的第一行
::marker ::marker 选择列表项的标记
::selection p::selection 选择用户选择的元素部分

推荐教程