伪类 Pseudo Classes

Docs

伪类：: 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。

伪类 Pseudo Classes
/* 用户的指针悬停在其上的任何按钮 */
button:hover {
  color: blue;
}

伪类由冒号（:）后跟着伪类名称组成（例如，:hover）。函数式伪类还包含一对括号来定义参数（例如，:dir()）。附上了伪类的元素被定义为锚元素（例如，button:hover 中的 button）。

伪类让你可以将样式应用于元素，不仅与文档树内容有关，也与外部因素有关——如与导航历史有关的（例如，:visited）、与其内容的状态有关的（如某些表单元素上的 :checked）或者与鼠标位置有关的（如 :hover，它可以让你知道鼠标是否在一个元素上）。

伪类

例子：a:visited 匹配所有曾被访问过的 <a> 元素。
什么是伪类呢？
- Pseudo-classes: 翻译过来是伪类;
- 伪类是选择器的一种，它用于选择处于特定状态的元素;
比如我们经常会实现的：当手指放在一个元素上时，显示另外一个颜色;
常见的伪类有：
- 动态伪类（dynamic pseudo-classes）:link、:visited、:hover、:active、:focus
- 目标伪类（target pseudo-classes）:target
- 语言伪类（language pseudo-classes）:lang()
- 元素状态伪类（UI element states pseudo-classes）:enabled、:disabled、:checked
- 结构伪类（structural pseudo-classes）(后续学习)
  - :nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()
  - :first-child、:last-child、:first-of-type、:last-of-type
  - :root、:only-child、:only-of-type、:empty
- 否定伪类（negation pseudo-classes）(后续学习):not()

伪类和伪元素

伪类能够根据状态改变元素样式。
伪元素可用于设置元素特定部分的样式。

动态伪类 dynamic pseudo-classes

使用举例
- a:link 未访问的链接，包括那些已经给定了其他伪类选择器的链接（例如:hover选择器，:active选择器，:visited选择器）。
- a:visited 已访问的链接。表示用户已访问过的链接。出于隐私原因，可以使用此选择器修改的样式非常有限。
- a:hover 鼠标挪动到链接上（没有激活它）的情况。这个样式会被任何与链接相关的伪类重写，像:link、:visited 和 :active 等。
- a:active 激活的链接（鼠标在链接上长按住未松开）它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。:active 伪类一般被用在 <a> 和 <button> 元素中。这个伪类的一些其他适用对象包括包含激活元素的元素，以及可以通过他们关联的 <label> 标签被激活的表格元素。
除了 <a> 元素，:hover、:active 也能用在其他元素上
动态伪类 - :focus
- :focus 指当前拥有输入焦点的元素（能接收键盘输入）
  - 文本输入框一聚焦后，背景就会变红色
- :focus伪类选择器常伴随在 :hover 伪类选择器左右，需要根据你想要实现的效果确定它们的顺序。
- 因为链接 <a> 元素可以被键盘的 Tab 键选中聚焦，所以 :focus 也适用于 <a> 元素
- 直接给 <a> 元素设置样式，相当于给 <a> 元素的所有动态伪类都设置了
  - 相当于 a:link、a:visited、a:hover、a:active、a:focus 的 color 都是 red

使用注意

:hover 必须放在 :link 和 :visited 后面才能完全生效
:active 必须放在 :hover 后面才能完全生效
:focus伪类选择器常伴随在 :hover 伪类选择器左右，需要根据你想要实现的效果确定它们的顺序。所以建议的编写顺序是 :link、:visited、:focus、:hover、:active
在触摸屏上 :hover 有问题，基本不可用。不同的浏览器上 :hover 伪类表现不同。可能从不会触发；或者在触摸某元素后触发了一小会儿；或者总是触发即使用户不在触摸了，直到用户触摸别的元素。触摸屏非常普遍，所以网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。

HTML
CSS

<div class="css-pseudo-classes-demo">
  <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/:hover" target="_blank" rel="noopener noreferrer"> :hover
    | MDN (mozilla.org) </a>
  <a href="">你已经访问过此链接。</a>
  <form>
    <label for="my-button">Button: </label>
    <button id="my-button" type="button">提交</button>
  </form>
</div>

.css-pseudo-classes-demo a {
  background-color: powderblue;
  transition: background-color 0.5s;
  border: 5px solid white;
  border-radius: 3px;
}

.css-pseudo-classes-demo form {
  position: relative;
  left: 5px;
  top: 10px;
}

.css-pseudo-classes-demo a:link {
  background-color: #82aae3;
}

.css-pseudo-classes-demo a:visited {
  background-color: #a75d5d;
}

.css-pseudo-classes-demo > a:focus {
  background-color: #3a4f7a;
}

.css-pseudo-classes-demo a:hover,
.css-pseudo-classes-demo > form:hover {
  background-color: #f1f7b5;
}

.css-pseudo-classes-demo > a:active,
.css-pseudo-classes-demo > form:active {
  background-color: #c780fa;
}

http://localhost:3000/css-pseudo-classes.html

:hover | MDN (mozilla.org) 你已经访问过此链接。

伪类​

动态伪类 dynamic pseudo-classes​

伪类

动态伪类 dynamic pseudo-classes