HTML 伪类是 CSS 中的一种特殊选择器，它允许样式化文档状态的元素，例如链接的未访问、悬停和已访问状态，它们不是实际存在于 DOM 中的元素，而是代表了某些元素的状态，以下是一些常用的 HTML 伪类及其设置方法：
1. 动态伪类
:hover 当用户悬停在元素上时触发。
<style>
a:hover {
color: red;
}
</style>
<a href="">鼠标悬停我</a>
:active 当元素被用户激活时（正在点击的链接）触发。
<style>
a:active {
color: blue;
}
</style>
<a href="">点我</a>
:focus 当元素获得焦点时触发，通常用于表单输入。
<style>
input:focus {
border-color: green;
}
</style>
<input type="text" placeholder="聚焦我">
2. 结构伪类
:first-child 匹配父元素的首个子元素。
<style>
li:first-child {
font-weight: bold;
}
</style>
<ul>
<li>第一个列表项</li>
<li>第二个列表项</li>
</ul>
:last-child 匹配父元素的最后一个子元素。
:nth-child(n) 匹配父元素的第 n 个子元素，n 可以是数字、关键词或表达式。
:nth-last-child(n) 从最后一个子元素开始计数，匹配父元素的第 n 个子元素。
:only-child 仅当元素是其父元素的唯一子元素时匹配。
:empty 当元素没有子元素时匹配。
3. 否定伪类
:not(selector) 如果元素不符合括号内的简单选择器列表，则匹配该元素。
<style>
li:not(:first-child) {
text-decoration: line-through;
}
</style>
<ul>
<li>不被划掉的第一个列表项</li>
<li>被划掉的第二个列表项</li>
</ul>
4. 表单相关伪类
:enabled, :disabled 分别匹配启用和禁用的表单元素。
:checked 匹配被选中的复选框（checkbox）或单选按钮（radio）。
:default 匹配默认的表单元素，通常是提交按钮。
:indeterminate 匹配处于不确定状态的复选框或单选按钮。
:required, :optional 分别匹配必需和可选的表单元素。
5. 其他伪类
:root 匹配文档的根元素。
:lang(language) 匹配指定语言的元素。
:target 匹配当前活动的 锚（页面内跳转链接）。
:valid, :invalid 匹配有效和无效的表单输入。
:indeterminate 匹配处于不确定状态的元素。
:read-write, :read-only 匹配可读写和只读的元素。
:selection 匹配用户选择的元素部分。
::before, ::after 在元素的内容前后插入内容。
相关问题与解答
Q1: 如何使用 CSS 伪类来改变链接的样式？
A1: 可以使用 :link 和 :visited 伪类来分别设置未访问和已访问链接的样式。
a:link {
color: blue; /* 未访问链接 */
}
a:visited {
color: purple; /* 已访问链接 */
}
Q2: 如何清除链接的默认样式？
A2: 可以通过设置 :link 和 :visited 伪类的 text-decoration 属性为 none 来移除链接下划线：
a:link, a:visited {
text-decoration: none;
}
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/412328.html
微信扫一扫 