CSS伪类介绍（二）
文章目录
- CSS伪类介绍（二）
-
- 带`href`属性的链接元素
- 表单相关
- 模式选择
- 精确批量匹配
- 影子DOM
- 打印
- 音频视频
- 其他
CSS伪类介绍（二）
另一篇参考CSS伪类介绍
带href属性的链接元素
:active
:active匹配被用户激活的元素。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。
这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括:link, :hover和:visited。
为保证样式生效，需要把:active的样式放在所有链接相关的样式之后。链接伪类先后顺序被称为LVHA顺序。
:link
:link表示尚未被访问的元素，匹配每个具有href属性的未访问的或元素。
:visited
:visited会在用户访问链接后生效，出于隐私保护的原因，使用该选择器可以修改的样式非常有限。同样仅适用于带有href属性的或元素。
可以查看隐私限制。
:hover
:hover在用户使用指针设备与元素进行交互时匹配，但不一定激活它。通常情况下，用户将光标悬停在元素上时触发。这个元素可以是任意元素，不一定是链接元素。
表单相关
:autofill
:autofill将在浏览器自动填充表单中的元素的值时匹配该元素。如果用户编辑了该字段，则该类将不再匹配。
:checked
:checked表示任何处于选中状态的radio, checkbox或select元素中的option。
:default
:default表示默认选中的表单元素。和:checked适用范围相同。
:disabled
:disabled表示任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。元素还有一个启用状态，在启用状态下，元素可以被激活或获取焦点。
:enabled
:enabled表示任何已启用的元素。如果元素可以被激活或获取焦点，那么他就说启用的。该元素还有一个禁用状态。
:focus
:focus表示获得焦点的元素。点击或使用Tab键选择时会触发。获得焦点的元素一般会有默认样式的outline表示轮廓，永远不要移除CSS轮廓。最好让outline和border有样式对比。
:focus-within
:focus-within与:focus不同，:focus匹配元素自身，而:focus-within表示当元素或后代元素被聚焦时，将匹配该元素。通常用于给获取焦点元素的祖先元素添加样式。
:focus-visible
:focus-visible可以根据用户使用鼠标和键盘展示不同形式的焦点。:focus设置的轮廓必定可见，但:focus-visible设置的轮廓可能只在使用键盘获取焦点时可见。
input, button {
&.focus-only:focus {
outline: 2px solid black;
/* 该轮廓必定在元素获取焦点时可见 */
}
&.focus-visible-only:focus-visible {
outline: 4px dashed darkorange;
/* 没有设置:focus的元素，利用客户端的行为决定是否匹配。键盘获取焦点会显示，鼠标获取焦点不一定显示。 */
}
}
:in-range
:in-range表示一个有限定范围(min和max属性)的元素，当值处于范围内时匹配。
:out-of-range
:out-of-range与:in-range一致，区别在于值处于范围外时匹配。
:indeterminate
:indeterminate表示状态不确定的表单元素，例如indeterminate设置为true的复选框(全选按钮有三种状态：选中、未选中、未知)。同名的所有单选按钮都未选中的单选按钮，还有没有设置值的。
<style>
input:indeterminate + label {
background: lime;
}
style>
<fieldset>
<legend>Checkboxlegend>
<div>
<input type="checkbox" id="checkbox" indeterminate="true" />
<label for="checkbox">This checkbox label starts out lime.label>
div>
fieldset>
<fieldset>
<legend>Radiolegend>
<div>
<input type="radio" id="radio1" name="radioButton" value="val1" />
<label for="radio1">First radio label starts out lime.label>
div>
<div>
<input type="radio" id="radio2" name="radioButton" value="val2" />
<label for="radio2">Second radio label also starts out lime.label>
div>
fieldset>
<script>
document.getElementById("checkbox").indeterminate = true;
script>
<style>
progress {
margin: 4px;
}
progress:indeterminate {
width: 80vw;
height: 20px;
}
style>
<progress>progress>
:invalid
:invalid用来选择任何未通过验证的、或表单元素。
:valid
:valid表示验证正确的或表单元素。
:user-invalid
:user-invalid默认不会触发匹配，只有当用户与表单交互或提交表单后的未通过验证的元素匹配。
:user-valid
:user-valid同样默认不会触发匹配，只有当用户与表单交互或提交表单后的通过验证的元素匹配。
:required
:required表示任何设置了required属性的、或