CSS 2 CSS 选择器 - 5 2.8 伪选择器 2.8.1 伪类选择器【根据特定状态选取元素】
CSS
文章目录
- CSS
- 2 CSS 选择器 - 5
- 2.8 伪选择器
- 2.8.1 伪类选择器【根据特定状态选取元素】
2 CSS 选择器 - 5
2.8 伪选择器
2.8.1 伪类选择器【根据特定状态选取元素】
【什么是伪类】
伪类用于定义元素的特殊状态。
例如，它可以用于：
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
【语法】
伪类的语法：
selector:pseudo-class {property: value;
}
【锚伪类】
链接能够以不同的方式显示：
CSS 链接
注释：在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。
注释：在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。
浏览器渲染
注意：
a:hover必须在 CSS 定义中的a:link和a:visited之后，才能生效！a:active必须在 CSS 定义中的a:hover之后才能生效！伪类名称对大小写不敏感。
【伪类和CSS类】
伪类可以与 CSS 类结合使用：
当您将鼠标悬停在例子中的链接上时，它会改变颜色：
【悬停在
在
:hover 伪类的实例：
请把鼠标移到下面的 div 元素上来改变其背景色：
把鼠标移到我上面
【简单的工具提示悬停】
把鼠标悬停到
元素（类似工具提示的效果）：
鼠标移到我上面来显示 p 元素哈哈！我在这里！
浏览器渲染
【CSS - :first-child 伪类】
:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。
匹配首个
元素
在下面的例子中，选择器匹配作为任何元素的第一个子元素的任何
元素：
【匹配所有
元素中的首个 元素】
在下面的例子中，选择器匹配所有
元素中的第一个 元素：
我是一个强壮的男人。我是一个强壮的男人。
我是一个强壮的男人。我是一个强壮的男人。
浏览器渲染
【匹配所有首个
元素中的所有 元素】
在下面的例子中，选择器匹配作为另一个元素的第一个子元素的
元素中的所有 元素：
【CSS - :lang 伪类】
:lang 伪类允许您为不同的语言定义特殊的规则。
在下面的例子中，:lang 为属性为 lang=“en” 的 元素定义引号：
Some text A quote in a paragraph
Some text.
在本例中，:lang 为 lang="en" 的 q 元素定义引号：
浏览器渲染
【所有CSS 伪类】
来源：https://www.w3school.com.cn/css/css_pseudo_classes.asp