伪类
定义
伪类（pseudo）是添加到选择器的关键字，指定要选择的元素的特殊状态
The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.
A pseudo-class always consists of a “colon” (:) followed by the name of the pseudo-class and optionally by a value between parentheses.
Pseudo-classes are allowed in all sequences of simple selectors contained in a selector. Pseudo-classes are allowed anywhere in sequences of simple selectors, after the leading type selector or universal selector (possibly omitted). Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document.
类别
| 伪类 | 含义 | demo | ||
|---|---|---|---|---|
| :active | 被用户激活的元素，用鼠标交互时，代表的是用户按下按键和松开按键之间的时间；在多键鼠标的系统中，只匹配主键 | |||
| :host | CSS伪类选择包含其内部使用的CSS的shadow DOM的根元素 - 换句话说，这允许你从其shadow DOM中选择一个自定义元素 | |||
| :only-child | 匹配没有任何兄弟元素的元素（只有1个元素） | |||
| :any-link | 代表一个有链接锚点的元素，而不管它是否被访问过，也就是说，它会匹配每一个有 href 属性的 <a>、<area> 或 <link> 元素。因此，它会匹配到所有的 :link 或 :visited。 |
|||
| :host() | 选择包含使用这段 CSS 的 Shadow DOM 的影子宿主（这样就可以从 Shadow DOM 中选择包括它的自定义元素）—— 但前提是该函数的参数与选择的阴影宿主相匹配。 | |||
最简单的用法是仅将类名放在某些自定义元素实例上，然后将相关的类选择器作为函数参数包含在内。不能将它与后代选择器表达式一起使用，以仅选择特定祖先内部的自定义元素的实例。这是 :host-context() 的作用。 |
||||
| :only-of-type | :only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。 |
|||
| :blank | 匹配没有子节点、仅有空的文本节点、仅有空白符的文本节点的节点 | |||
| :optional | 表示没有required 属性的 input select 或者 textarea | demo | ||
| :checked | 表示任何处于选中状态的radio(<input type="radio">), checkbox **(<input type="checkbox">) 或(“select”) 元素中的option **HTML元素(“option”)。 |
|||
| :hover | 用户移动到一个元素上（还未激活）；触摸屏上 hover 基本不可用，不同的浏览器上表现不同； | |||
| :out-of-range | 表示一个input元素，当值处于属性min和max限定的范围之外; 只适用于拥有范围设定的元素；type = number、range、date、datetime、datetime-local、month、time、week； | demo | ||
| :in-range | 同上，只不过刚好相反 | |||
| :indeterminate | 表示状态不确定的表单元素；如表单元素的indeterminate属性值被设置为true；radio中具有相同name值的所有单选按钮都未被选中；处于不确定状态的progress； | |||
| :default | 表示一组相关元素中的默认表单元素 | |||
| :defined | 表示任何已定义的元素。这包括任何浏览器内置的标准元素以及已成功定义的自定义元素，shadow DOM | |||
| :invalid | 表示任意内容未通过验证的 <input> 或其他 <form> 元素 . |
|||
| :read-only | 表示元素不可被用户编辑的状态（如锁定的文本输入框）；注意：该选择器会选择作用域下所有的用户只读的内容，如p、div、span | demo | ||
| :read-write | 同上，只不过用户可以编辑； | |||
| :disabled | 表示任何被禁用的元素；如果一个元素不能被激活（选择、点击、接受文本输入、获取焦点），则该元素处于禁用状态；对于pointer-events:none 的元素不生效； | demo | ||
| :lang | 基于元素语言来匹配页面元素 | |||
| :required | 表示拥有required的表单元素 | |||
| :last-child | 表示作用域下的最后一个子元素 | demo | ||
| :empty | 代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。简单来讲，只要元素中包含了空格、非注释节点，就无法匹配上（不含伪元素，只有伪元素也能匹配） | demo | ||
| :last-of-type | 表示作用域下给定类型的最后一个元素 | demo | ||
| :root | 匹配文档元素的根元素，对于HTML来说， :root 就表示html，只不过优先级更高（相比于html）；实际上，html[lang=””] 来选择的话，优先级就高于:root了； | demo | ||
| :enabled | 对比上面的:disabled | |||
| :scope | 一般在js中使用，用于选择元素本身，如querySelectorAll(‘:scope > div’) | |||
| :target | 代表唯一的一个页面元素，其id与当前URL片段匹配；配合锚点可以做很多有趣的事情，参见示例 | |||
| :first-child | 一组兄弟元素中的第一个元素 | |||
| :fist-of-type | 一组兄弟元素中其类型的第一个元素 | |||
| :not | 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为_反选伪类（negation pseudo-class_）。 | |||
| :nth-child(an+b) | 从1开始排序，匹配 an + b（n = 0, 1, 2, 3, 4） 的元素；可以选择odd/even(偶数) | |||
| :valid | 参考:invalid | |||
| :focus | 获得焦点的元素，仅适用于焦点元素本身 | |||
| :nth-last-child() | 从兄弟节点从后往前匹配 | |||
| :focus-within | 表示一个元素获得焦点或者一个元素的后代元素获得焦点 | demo | ||
| :nth-last-of-type | 从结尾处开始计数 | |||
| :nth-of-type | 针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。 |
其他
- 链接的几种状态处理（:link、:visited、:hover、:active）
由于这几种状态可能会被后续声明的规则覆盖，因此为保证样式生效，需要协调好优先级，其设置顺序称之为LVHA顺序 —— :link — :visited — :hover — :active
- 元素的选中
如果 <selector>:pseudo-class 选中的是 <selector> 本身， <selector> :pseudo-class 才 会选中后代元素，参见demo
- 文本打印
- left
- right
- first - 打印文档的时候，第一页的样式
伪元素
定义
伪元素（pseudo-element）是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。
Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the
::beforeand::afterpseudo-elements give access to generated content).
A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.
This
::notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely,:first-line,:first-letter,:beforeand:after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.
Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.
类别
| 伪类 | 含义 | demo | ||
|---|---|---|---|---|
| ::after | ||||
| ::before | ||||
| ::first-line | first-line 不会匹配任何真实的DOM元素，只会匹配由用户代理插入的元素（该行为不可见，用户代理会自动插入相应的虚拟标签） | |||
 |
||||
| 需要注意的是，该选择器只对默认block的元素生效。默认行内的元素，即使设置了该属性，也不会生效。 | ||||
| ::first-letter | ||||
| ::selection | ||||
其他
伪类和伪元素的区别
区别在于最后是否产生一个真实的DOM节点（这个节点可能对用户可见， 如::before、::after，也有可能对用户不可见，如::first-letter、::first-line），如::first-letter虽然对DOM 不可见，但是用户代理实际上是对满足条件的元素增加了一个虚拟标签
参考：
- CSS 3 规范