原创力文档- 1、本文档共19页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
CSS：：CSS伪类与伪元素教程伪类与伪元素教程
CSS伪类简介伪类简介
1.伪类的作用伪类的作用
在CSS中，伪类允许我们选择文档树中无法通过标准选择器获取的元素状态。它们被用来添加基
于元素特定状态的样式，例如当一个链接被访问过、当鼠标悬停在元素上、或当元素是其父元素
的第一个子元素时。伪类扩展了CSS的选择能力，使得样式可以更加动态和响应用户交互。
2.伪类的分类伪类的分类
CSS伪类主要分为以下几类：
1.链接状态伪类链接状态伪类：如:link,:visited,:hover,:active，用于控制链接的不同状态。
2.用户操作伪类用户操作伪类：如:hover,:active,:focus，用于响应用户操作，如鼠标悬停、点击
或键盘焦点。
3.结构化伪类结构化伪类：如:first-child,:last-child,:nth-child(n)，用于选择文档树中
特定位置的元素。
4.状态伪类状态伪类：如:checked,:enabled,:disabled，用于选择表单控件的特定状态。
5.通用伪类通用伪类：如:not(selector),:empty,:target，用于选择不匹配特定选择器的元
素、空元素或URL中的锚点目标。
3.伪类与选择器的关系伪类与选择器的关系
伪类与CSS选择器紧密相关，它们可以附加在选择器的末尾，以更精确地选择和样式化元素。例
如，.button:hover选择器会选择所有处于鼠标悬停状态的.button类元素。伪类可以与基
本选择器、属性选择器、类选择器等组合使用，以创建更复杂的选择模式。
3.1示例：链接状态伪类示例：链接状态伪类
/*未访问的链接*/
a:link{
color:blue;
}
/*已访问的链接*/
a:visited{
color:purple;
}
/*鼠标悬停在链接上*/
a:hover{
color:red;
}
/*链接被激活时（例如，鼠标点击时）*/
a:active{
color:green;
}
3.2示例：用户操作伪类示例：用户操作伪类
/*当元素获得焦点时*/
input:focus{
outline:2pxsolidblue;
}
/*当鼠标悬停在按钮上时*/
button:hover{
background-color:#f0f0f0;
}
/*当按钮被激活时（例如，鼠标点击时）*/
button:active{
background-color:#d0d0d0;
}
3.3示例：结构化伪类示例：结构化伪类
/*选择所有列表项中的第一个*/
li:first-child{
font-weight:bold;
}
/*选择所有列表项中的最后一个*/
li:last-child{
font-style:italic;
}
/*选择所有列表项中的第三个*/
li:nth-child(3){
color:red;
}
/*选择所有列表项中的偶数项*/
li:nth-child(even){
background-color:#f2f2f2;
}
3.4示例：状态伪类示例：状态伪类
/*选择所有被选中的复选框*/
input[type=checkbox]:checked{
background-color:green;
}
/*选择所有被选中的单选按钮*/
input[type=radio]:checked{
background-color:green;
}
/*选择所有禁用的输入框*/
input:disabled{
background-color:#cccccc;
}
3.5示例：通用伪类示例：通用伪类
/*选择所有不包含类active的按钮*/
button:not(.active){
color:
文档评论（0）