📅 最后修改于: 2023-12-03 15:38:16.626000 🧑 作者: Mango
CSS 伪类可以使选择器根据元素的状态而选择样式。伪类用于向某些选择器添加特殊的效果。
以下是如何在 HTML 中使用伪类：
伪类使用冒号（:）来标识，它们必须附加到选择器的末尾。
selector:pseudo-class {
property:value;
}
这个选择器表示当元素处于特定状态时，添加样式。其中 selector 是 HTML 元素的标识符，而 pseudo-class 是伪类的名称。
以下是一些常用的伪类：
:hover：鼠标悬停在元素上时添加样式。:active：元素被激活时（例如，用户点击时）添加样式。:focus：元素获得焦点时添加样式。:first-child：选择元素的第一个子元素时添加样式。:last-child：选择元素的最后一个子元素时添加样式。:nth-child(n)：选择元素的第 N 个子元素时添加样式。:nth-of-type(n)：选择与给定类型的第 N 个元素时添加样式。:not(selector)：选择与指定选择器不匹配的元素时添加样式。:checked：选择已选中的复选框或单选按钮时添加样式。以下是如何在 HTML 中添加伪类的示例：
<!DOCTYPE html>
<html>
<head>
<style>
/* 鼠标悬停时添加样式 */
a:hover {
color: red;
}
/* 元素被激活时添加样式 */
button:active {
background-color: #4CAF50;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
/* 元素获取焦点时添加样式 */
input:focus {
border: 3px solid #555;
}
/* 第一个子元素添加样式 */
ul li:first-child {
font-weight: bold;
}
/* 最后一个子元素添加样式 */
ul li:last-child {
color: gray;
}
/* 第三个子元素添加样式 */
ul li:nth-child(3) {
text-decoration: underline;
}
/* 第二个段落添加样式 */
p:nth-of-type(2) {
background-color: #F0E68C;
}
/* 不匹配选择器添加样式 */
div:not(.important) {
opacity: 0.5;
}
/* 选中的复选框或单选按钮添加样式 */
input:checked + label {
color: #FF0000;
}
</style>
</head>
<body>
<a href="#">Link</a>
<br><br>
<button>Click me</button>
<br><br>
<input type="text" name="name"><br><br>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
<br>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<br>
<div>Not important</div>
<div class="important">Important</div>
<br>
<input type="checkbox" id="checkbox">
<label for="checkbox">Checkbox</label>
</body>
</html>
上述示例中包括了各种类型的伪类，可以根据需要进行选择。