太原市外贸网站建设163邮箱注册申请注册
目录
前言
一、什么是伪类选择器？
二、常见的伪类选择器详解
1. :hover —— 悬停状态
2. :active —— 活动状态
3. :focus —— 焦点状态
综合案例
4. :first-child —— 第一个子元素
5. :last-child —— 最后一个子元素
6. :nth-child(n) —— 按顺序选中特定子元素
7. :not(selector) —— 非选择器
三、表单元素相关伪类
1. :checked —— 选中状态
2. :disabled —— 禁用状态
3. :required —— 必填状态
四、伪类选择器应用技巧
1. 结合使用多个伪类选择器
2. 改善用户体验
五、总结
前言
在CSS中，伪类选择器是非常强大的工具，它们可以帮助你在页面样式中根据元素的特定状态进行动态调整。这些选择器让我们能够无需额外的JavaScript代码，仅通过CSS就实现诸如按钮按下、链接悬停等交互效果，使得网页的表现力大大增强。
本篇博客将详细讲解CSS中的常见伪类选择器，包括其语法、应用场景和注意事项。
一、什么是伪类选择器？
伪类是CSS中用于选中元素特定状态或特定条件下的特殊选择器。它们通常用于选中那些不是DOM树中某个元素的本身，但我们依然希望能够应用样式的情况。例如，当用户将鼠标悬停在链接上时，链接的样式可能需要改变，或者在表单元素获得焦点时需要突出显示。
伪类选择器的语法如下
selector:pseudo-class {property: value;
}
常见的伪类选择器分为几类：交互状态伪类、结构伪类、表单元素伪类等。
二、常见的伪类选择器详解
1. :hover —— 悬停状态
:hover是最常见的伪类之一，用于选中鼠标悬停在元素上的状态。常用在按钮、链接等元素上，以实现交互效果。
<a href="#">悬停链接</a>
a:hover {color: red;text-decoration: underline;
}
当用户将鼠标悬停在链接上时，链接文字颜色变为红色，并添加下划线。
2. :active —— 活动状态
:active用于选中当前被用户点击的元素状态。常用于按钮、链接等元素上，表示用户正在点击该元素。
<button>点击我</button>
button:active {background-color: green;
}
当用户点击按钮时，按钮背景颜色变为绿色。
3. :focus —— 焦点状态
:focus用于选中获得键盘输入焦点的元素。常用于表单输入框、按钮等，能够使元素在获得焦点时表现突出。
<input type="text" placeholder="请输入内容">
input:focus {border: 2px solid blue;
}
当用户点击输入框或通过键盘导航聚焦输入框时，输入框的边框变为蓝色。
综合案例
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态伪类</title><style>/* 未访问的链接 */a:link{color: blue;}/* 访问过的链接 */a:visited{color: green;}/* 鼠标悬停 */a:hover{color: red;}/* 激活的链接 */a:active{color: yellow;}span:hover{color: red;}span:active{color: yellow;}/* 获得焦点--输入框获得焦点 */input:focus,select:focus{color:brown;background-color: red;}</style>
</head>
<body><a href="http://www.baidu.com">百度</a><a href="http://www.hao123.com">你好</a><br><span>hello</span><br><input type="text" ><input type="text" ><input type="text" ><select><option>四川</option><option>北京</option><option>上海</option></select>
</body>
</html>4. :first-child —— 第一个子元素
:first-child伪类选择器用于选中父元素中的第一个子元素，不管该元素的类型是什么。
<ul><li>第一个项</li><li>第二个项</li>
</ul>
ul li:first-child {font-weight: bold;
}
第一个<li>元素会加粗，而其他项不会受到影响。
:first-child—— 父元素的第一个子元素:last-child—— 父元素的最后一个子元素:nth-child(n)—— 父元素中第n个子元素:nth-last-child(n)—— 从后往前数的第n个子元素:only-child—— 父元素中唯一的子元素:nth-of-type(n)—— 同类型元素的第n个子元素:first-of-type—— 同类型元素的第一个:last-of-type—— 同类型元素的最后一个:empty—— 没有任何子元素的元素
5. :last-child —— 最后一个子元素
:last-child与:first-child类似，用于选中父元素中的最后一个子元素。
<ul><li>第一项</li><li>第二项</li>
</ul>
ul li:last-child {color: green;
}
最后一个<li>元素的文字颜色变为绿色。
6. :nth-child(n) —— 按顺序选中特定子元素
:nth-child(n)允许你选择父元素中的特定位置的子元素。这里的n可以是具体的数字、公式或关键词。
<ul><li>项1</li><li>项2</li><li>项3</li>
</ul>
ul li:nth-child(2) {color: orange;
}
这里，第二个<li>元素的文本颜色将变为橙色。
ul li:nth-child(odd) {background-color: lightgray;
}
odd表示所有奇数位置的元素将应用背景色。
7. :not(selector) —— 非选择器
:not()是一个非常实用的伪类，它选中不匹配指定选择器的元素。它是CSS中唯一一个能够选择不匹配条件的伪类，广泛应用于排除特定元素。
<ul><li class="highlight">项1</li><li>项2</li><li class="highlight">项3</li>
</ul>
ul li:not(.highlight) {color: gray;
}
所有不具有highlight类的<li>元素将呈现灰色。
三、表单元素相关伪类
表单元素伪类选择器专门用于控制表单元素的状态。以下是一些常见的伪类：
1. :checked —— 选中状态
:checked用于选中已被勾选或已选中的复选框、单选框等。
<input type="checkbox" checked>选项1
<input type="checkbox">选项2
input:checked {background-color: yellow;
}
已勾选的复选框背景色变为黄色。
2. :disabled —— 禁用状态
:disabled用于选中被禁用的表单元素。
<input type="text" disabled>
input:disabled {background-color: #e0e0e0;
}
禁用的输入框背景色变为灰色。
3. :required —— 必填状态
:required用于选中标记为“必填”的表单元素。
<input type="text" required>
input:required {border: 2px solid red;
}
标记为必填的输入框将呈现红色边框。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类</title><style>/* 选中勾选的复选或者单选框 */input:checked{width:30px;height:30px;}/* 选中可用的输入框 */input:enabled{background-color:green;}/* 选中禁用的输入框 */input:disabled{background-color:grey;}</style>
</head>
<body><input type="checkbox"><input type="radio" name="gender"><input type="radio" name="gender"><input type="password"></input><input type="text" disabled></input>
</body>
</html> 
四、伪类选择器应用技巧
1. 结合使用多个伪类选择器
你可以将多个伪类选择器组合在一起，增加选择的精确度。例如，选中同时满足:hover和:focus状态的元素。
a:hover:focus {color: blue;
}
当链接既被悬停（hover）又获得焦点（focus）时，颜色变为蓝色。
2. 改善用户体验
伪类选择器广泛应用于改善用户交互体验。例如，:focus可以让表单元素在获得焦点时具有明显的样式，帮助用户在填写表单时获得更好的视觉反馈。
五、总结
CSS伪类选择器是让页面样式更加动态、交互性更强的利器。通过掌握伪类选择器的应用，我们可以轻松实现悬停、点击、焦点等状态下的样式变化，使网页更加生动、互动，提升用户体验。常用的伪类如:hover、:active、:focus等是日常开发中必不可少的工具，熟练掌握这些伪类，将大大增强网页设计能力。
下篇博客我们将伪类选择器进行分类整合，让大家有一个更好的理解记忆，