CSS伪类介绍（二）

CSS伪类介绍（二）

另一篇参考CSS伪类介绍

带href属性的链接元素

• :active

:active匹配被用户激活的元素。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。

这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括:link, :hover和:visited。

为保证样式生效，需要把:active的样式放在所有链接相关的样式之后。链接伪类先后顺序被称为LVHA顺序。

• :link

:link表示尚未被访问的元素，匹配每个具有href属性的未访问的<a>或<area>元素。

• :visited

:visited会在用户访问链接后生效，出于隐私保护的原因，使用该选择器可以修改的样式非常有限。同样仅适用于带有href属性的<a>或<area>元素。

可以查看隐私限制。

• :hover

:hover在用户使用指针设备与元素进行交互时匹配，但不一定激活它。通常情况下，用户将光标悬停在元素上时触发。这个元素可以是任意元素，不一定是链接元素。

---

表单相关

• :autofill

:autofill将在浏览器自动填充表单中的<input>元素的值时匹配该元素。如果用户编辑了该字段，则该类将不再匹配。

• :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属性)的<input>元素，当值处于范围内时匹配。

• :out-of-range

:out-of-range与:in-range一致，区别在于值处于范围外时匹配。

• :indeterminate

:indeterminate表示状态不确定的表单元素，例如indeterminate设置为true的复选框(全选按钮有三种状态：选中、未选中、未知)。同名的所有单选按钮都未选中的单选按钮，还有没有设置值的<progress>。

<style>
input:indeterminate + label {
  background: lime;
}
</style>
<fieldset>
  <legend>Checkbox</legend>
  <div>
    <input type="checkbox" id="checkbox" indeterminate="true" />
    <label for="checkbox">This checkbox label starts out lime.</label>
  </div>
</fieldset>
<fieldset>
  <legend>Radio</legend>
  <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用来选择任何未通过验证的<form>、<fieldset>或表单元素。

• :valid

:valid表示验证正确的<form>或表单元素。

• :user-invalid

:user-invalid默认不会触发匹配，只有当用户与表单交互或提交表单后的未通过验证的元素匹配。

• :user-valid

:user-valid同样默认不会触发匹配，只有当用户与表单交互或提交表单后的通过验证的元素匹配。

• :required

:required表示任何设置了required属性的<input>、<select>或<textarea>元素。

• :optional

:optional表示任何未设置required属性的<input>、<select>或<textarea>元素。

• :placeholder-shown

:placeholder-shown表示当前显示占位符文本的任何<input>或<textarea>元素。

• :read-only

:read-only表示元素不可被用户编辑的状态。可以选择readonly属性的<input>元素，以及所有的不可被用户编辑的元素。

• :read-write

:read-write代表一个可以被用户编辑的元素。除了<input>元素，还有设置了contenteditable属性的元素。

---

模式选择

（这些模式都要求从右到左的顺序，先找到符合状态的元素，再匹配伪类的选择器是否符合）

• :first-child

:first-child表示一组兄弟元素中的第一个元素。

• :first-of-type

:first-of-type表示一组兄弟元素中其类型的第一个元素。

• :last-child

:last-child表示一组兄弟元素中的最后元素。

• :last-of-type

:last-of-type表示一组兄弟元素中其类型的最后一个元素。

• :empty

:empty用于选择不包含任何子元素的元素。子元素可以是元素节点或文本（包括空格）。但是注释、处理指令和CSS不会影响元素是否被认定为空。

• :only-child

:only-child表示没有任何兄弟元素的元素。

• :only-of-type

:only-of-type表示任意一个元素，这个元素没有他相同类型的兄弟元素。

• :nth-child()

:nth-child()根据元素在父元素的子元素列表中的索引来选择元素。索引从1开始。

:nth-child(<nth> [of <complex-selector-list>]?) {
    /* ... */
}
/*
<nth>:
	odd: 表示奇数索引的元素（2n+1）
	even：表示偶数索引的元素（2n）
	An+B：n为正整数或0，AB为整数且A不为0
of <selector>:
	根据选择器参数匹配的兄弟元素列表，再应用<nth>，最后判断是否与伪类前面的选择器匹配
*/
li:nth-child(-n + 3 of .noted) {
    /* 
    1. 找到class为noted的兄弟元素组成的集合
    2. 根据模式选择集合中前三的元素
    3. 判断模式选中的元素是否匹配伪类前面的选择器 li
    */
    /* 与下面的规则比较，of后的选择器相当于先进行了一次过滤 */
}
li.noted:nth-child(-n + 3) {
    /*
    1. 找到所有兄弟元素组成的集合
    2. 根据模式选择集合中前三的元素
    3. 判断模式选中的元素是否匹配伪类前面的选择器 li.noted
    */
}

• :nth-last-child()

:nth-last-child()在兄弟节点中从后往前匹配索引。基本与:nth-child()一致。

• :nth-of-type()

:nth-of-type()基于相同类型标签的兄弟元素中的位置来匹配元素。

:nth-of-type(<an-plus-b> | even | odd) {
  /* ... */
}
li.item:nth-of-type(2n + 1) {
    /*
    1. 从兄弟元素集合中根据标签类型分组成多个集合
    2. 每个集合都根据模式选择集合在奇数索引的元素
    3. 判断模式选中的元素是否匹配伪类前面的选择器 li.item
    */
}

• :nth-last-of-type()

:nth-last-of-type()基于元素在相同类型标签的兄弟元素中相对最后一个元素的位置匹配元素。与:nth-of-type()匹配的顺序相反。

---

精确批量匹配

• :has()

:has()表示一个元素，如果参数传递的相对选择器在锚定到该元素时，至少匹配一个元素。可以针对引用元素选择父元素或者先前的兄弟元素。

:has(<relative-selector-list>) {
    /*
    <relative-selector-list>:
    	逗号分隔的相对选择器列表，如果某个选择器无效会忽略，其他正常使用。
    	如果不支持`:has()`，则整个选择器都失效，除非本身位于一个可容错选择器列表中。比如`:is()`或`:where()`
    	`:has()`不能嵌套，伪元素也不是有效选择器，这些都会被忽略
    */
}
h1:has(~ p) {
    /* 在h1元素后有一个p的兄弟元素时，选中h1 */
}

• :is()

:is()以选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。

伪元素在选择器列表中无效。

:is()计入整个选择器的优先级；:where()优先级为0。它们都接收容错选择器列表。如果一个选择器无法解析，会忽略不正确或不支持的选择器，并使用其他选择器。一般CSS在使用选择器列表时，如果任何一个选择器无效，则会忽略整个列表。

:is(:valid, :unsupported) {
	/* :unsupported 会被忽略，:valid正确解析 */
}
:valid,
:unsupported {
    /* :unsupported无效会导致整个规则都无效 */
}

• :not()

:not()用来匹配不符合一组选择器的元素。防止特定的元素被选中。

:not(<complex-selector-list>) {
	/*
    可以将一个或多个以逗号分隔的选择器列表作为其参数。
    选择器中不得包含另一个否定选择器或伪元素。
    如果一个选择器无效，则整个规则都无效。可以使用`:is()`包裹选择器列表，将其变成容错的选择器列表。
    */
}

• :where()

:where()以选择器列表作为参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。:where()优先级为0，可以很容易被覆写样式。:is()优先级是所有选择器之和，优先级很高。

---

影子DOM

• :has-slotted

:has-slotted匹配<slot>元素，当<slot>元素的内容不为空或不是使用默认值时生效。

• :host

:host选择影子DOM的根宿主。只在影子DOM内部使用。

• :host()

接收一个选择器参数，如果影子根宿主匹配参数则选中根宿主。

• host-context()

接收一个选择器参数，该参数匹配的元素是当前根宿主的祖先元素时匹配根宿主。

---

打印

• :first与@page一起使用。表示打印文档的第一页。只能修改有限的属性。
• :left与@page一起使用。表示打印文档的左侧页设置样式。
• :right与@page一起使用。表示打印文档的右侧页设置样式。

---

音频视频

• :buffering表示可以播放的<audio>或<video>正在缓冲媒体资源，此时处于播放状态。
• :muted表示能够发出声音的元素，但是被静音。
• :paused表示暂停状态(即非播放状态)的可播放的元素
• :playing表示一个处于播放状态的可播放元素。即使视频缓冲或停滞也是正在播放的状态。
• :seeking表示一个可播放元素，当可播放元素正在媒体资源中寻找播放位置时。比如拖动进度条在特定位置播放，当媒体元素尚未到达该位置，则认为资源正在寻找。
• :stalled表示一个暂停的可播放元素，因为某些原因(比如网络错误)导致播放停滞。这个状态仍然处于播放状态。
• :volume-locked表示能够发出声音，但其音量目前被用户锁定的媒体元素。
• :picture-in-picture匹配处于画中画模式的<video>。

---

其他

• :defined

:defined表示任何已定义的元素。包括内置标准元素以及自定义元素。未定义的自定义元素不会生效。

• :fullscreen

:fullscreen匹配当前处于全屏模式的所有元素。某个元素调用requestFullscreen()后，该元素及后代元素全部处于全屏模式。

• :modal

:modal匹配打开(调用showModal())时的<dialog>元素。该状态禁止与模态框外部元素交互，直到交互被取消。可以有多个模态框，但只有一个模态框激活并能接收输入或交互操作。

• :open

:open表示某些元素的开启状态，例如<details>、<dialog>、<select>或特殊类型的<input>（例如颜色选择器）。

• :popover-open

:popover-open表示一个带有popover属性并处于显示状态的元素。通过popover属性将元素转换成类似<dialog>的模态框。通过Popover API操控显示状态。

• :root

:root匹配文档树的根元素。对于HTML来说，就是<html>元素，但比<html>选择器有更高的优先级。

• :scope

:scope表示作为选择器要匹配的作为参考点或作用域的元素。

当在样式表的根级别使用时，等效于:root。当在@scope块中使用时，匹配定义作用域的根。

:scope {
    /* 等效于`:root` */
}

@scope (.container) {
    :scope {
        /* 等效于`.container` */
    }
}

• :target

:target匹配当前URL的hash值指向的锚点元素。

<style>
/* http://www.example.com/index.html#section2 */
:target {
  /* 匹配 #section2 */
  border: 2px solid black;
}
</style>

<section id="section2">Example</section>

• :target-within匹配:target元素的祖先元素。