CSS 伪类和伪对象选(五)

最新推荐文章于 2022-07-20 16:57:41 发布

转载最新推荐文章于 2022-07-20 16:57:41 发布 · 151 阅读

本文详细介绍了 CSS 中的伪类选择器和伪对象选择器，包括它们的使用方法及应用场景。例如 :hover、:focus 和 :active 动态伪类用于控制元素的状态变化，而 :before 和 :after 伪对象则用于插入内容。

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

一、伪选择器

伪选择器包括：伪类选择器和伪对象选择器，以冒号（：）作为前缀，冒号后紧跟伪类或者伪对象名称，冒号前后没有空格，否则解析为包含选择器

如：

div:hover{ font-size:12px;}
/*
div为指定标签名
hover选择符,伪类 或者 伪元素名
*/

伪选择器专门用来选择特殊区域或者特殊状态下的元素或者对象，这些特殊区域或者特殊状态是无法通过标签选择器，ID选择器或者类选择器进行精确控制的

二、伪类选择器和伪对象选择器

伪类	说明
:focus	定义对象在成为输入焦点（该对象的onfocus事件发生时）的样式
:first-child	定义对象的第一个子对象的样式
：first	定义页岩容器第一页使用的样式，仅适用于@page规则
：left	定义页面容器位于装订线左边的所有页面使用的样式，仅适用于@page规则
：right	定义页面容器位于装订线右边的所有页面使用的样式，仅适用于@page规则
:lang	定义对象使用特殊语言的内容样式

伪对象	说明
:after	与content属性一起使用，定义在对象后的内容
:before	与content属性一起使用，定义在对象前的内容
:first-letter	定义对象内第一个字符的样式
:first-line	定义对象内第一行的样式

三、超链接

@charset "utf-8";
/* CSS Document */
/*超链接默认样式*/
a{
    text-decoration:none;
    color:#333333;
}
/*访问过的样式*/
a:visited{
    color:#0000ff;
}
/*鼠标经过样式*/
a:hover{
    color:#00ff00;
}
/*鼠标按下样式*/
a:active{
    color:#FF0000;