CSS 伪类

最新推荐文章于 2025-01-31 10:52:13 发布

原创最新推荐文章于 2025-01-31 10:52:13 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

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

它可以用于：

1.设置鼠标悬停在元素上时的样式

2.为已访问和未访问链接设置不同的样式

3.设置元素获得焦点时的样式

锚伪类

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

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效。伪类名称对大小写不敏感。

简单的工具提示悬停

把鼠标悬停到 <div> 元素以显示 元素（类似工具提示的效果）：

CSS - :first-child 伪类

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

匹配首个 元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的任何 元素：

p:first-child {
  color: blue;
}

匹配所有 元素中的首个 元素

在下面的例子中，选择器匹配所有 元素中的第一个 元素：

匹配所有首个 元素中的所有 元素

在下面的例子中，选择器匹配作为另一个元素的第一个子元素的 元素中的所有 元素：

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

CSS - :lang 伪类

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

在下面的例子中，:lang 为属性为 lang="en" 的 <q> 元素定义引号：

使用 :focus 伪类：