html伪类怎么设置

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;
}