伪类选择器（Pseudo-classes Selector）

学思创

2023-12-18

286

伪类选择器（Pseudo-class selectors）用于选择具有特定状态或关系的元素。

以下是一些常见的伪类选择器种类：

树结构伪类（Tree-Structural pseudo-classes）：用于根据元素在其父元素中的位置或在文档中的结构来选择元素。结构伪类可以选择元素的位置、数量以及它们的关系。这些伪类可以根据元素在文档中的结构或父元素中的位置来选择元素，而不依赖于元素本身的内容或特定的属性。

以下是结构性伪类选择器：
1. :nth-child(n) 表示作为父元素的第n个子元素的元素
2. :nth-last-child(n) 表示作为父元素的倒数第n个子元素的元素
3. :first-child 表示作为父元素的第一个子元素的元素
4. :last-child 表示作为父元素的第一个子元素的元素
5. :only-child 表示一个没有同级元素的元素
6. :nth-of-type(n) 表示作为父元素中相同类型的元素中的第n个元素
7. :nth-last-of-type(n) 表示作为父元素中相同类型的元素中的倒数第n个元素
8. :first-of-type 表示作为其类型的第一个同级元素的元素
9. :last-of-type 表示作为其类型的最后一个同级元素
10. :only-of-type 表示没有具有相同扩展元素名称的同级元素
11. :root 表示作为文档根的元素
12. :empty 表示一个根本没有子级的元素
语言伪类（Linguistic Pseudo-classes）：它们可以根据元素的语言或文本内容来选择和样式化元素。这些伪类用于根据语言特性来样式化元素。

下面是一些语言伪类的示例：
1. :lang() 这个伪类允许你根据元素的语言属性（lang）来选择元素。它会匹配具有特定语言属性的元素。例如：
```
p:lang(fr) {
  color: blue;
}
```
  在上面的示例中，p:lang(fr) 选择器选择拥有法语语言属性的段落（<p>）元素，并将文本颜色设置为蓝色。
2. :dir() 用于根据元素的文本方向选择元素
  
  它有两个可能的值：
  - :dir(ltr) 选择文本方向为从左到右（left-to-right）的元素。
  - :dir(rtl) 选择文本方向为从右到左（right-to-left）的元素。
```
/* 选择文本方向从左到右的段落，并设置文字颜色为红色 */
p:dir(ltr) {
  color: red;
}

/* 选择文本方向从右到左的段落，并设置文字颜色为蓝色 */
p:dir(rtl) {
  color: blue;
}
```
  这个示例会将文本方向从左到右的段落文字颜色设置为红色，而将文本方向从右到左的段落文字颜色设置为蓝色。
输入伪类（The Input Pseudo-classes）：用于选择表单元素的不同状态。
这些伪类可以帮助您根据交互状态为表单元素应用样式，以提供更好的用户体验。

以下是常用的几个伪类：
1. :disabled 选择被禁用的表单元素。
2. :enabled 选择可用的表单元素。
3. :read-only 选择只读（read-only）状态的表单元素的伪类。
  当表单元素设置为只读时（通过 readonly 属性），元素将具有只读状态。可以使用 :read-only 伪类来选择并为这些只读元素应用特定的样式。
4. :read-write 选择可编辑（read-write）状态的表单元素。
  当表单元素处于可编辑状态时，即用户可以输入或修改其值时，该元素将具有可编辑状态。可以使用 :read-write 伪类来选择并为这些可编辑元素应用特定的样式。
5. :placeholder-shown 选择具有可见占位符文本（placeholder）的输入字段。
  当输入字段处于没有焦点且占位符文本可见的状态时，即没有输入内容或者输入内容被清空时，该字段将符合 :placeholder-shown 伪类的选择器。
6. :autofill 选择自动填充（autofill）状态的表单元素。
  当浏览器自动填充表单字段时，为了提高用户体验，它会自动填充表单字段的值。此时，该表单元素将符合 :autofill 伪类的选择器。
7. :default 选择默认选中状态的表单元素。
  当表单元素被设置为默认选中状态时，即在加载页面时自动选中的元素，该元素将符合 :default 伪类的选择器。
8. :checked 选择已被选中的复选框或单选按钮元素。
9. :indeterminate 选择具有未确定状态（indeterminate）的复选框或单选按钮。
  当复选框或单选按钮处于未确定状态时，即不是选中（checked）也不是未选中（unchecked）的状态，该元素将符合 :indeterminate 伪类的选择器。
10. :blank 选择空白内容的元素。
  当元素没有包含任何内容或只包含空白字符（例如空格、换行符等）时，该元素将符合 :blank 伪类的选择器。
11. :valid 选择表单中处于有效状态的输入字段。
  当用户输入满足表单字段的验证规则或未输入任何内容时，该输入字段将符合 :valid 伪类的选择器。
12. :invalid 选择表单中处于无效状态的输入字段。
  当用户输入不满足表单字段的验证规则时，或者该输入字段必填但用户未进行输入时，该输入字段将符合 :invalid 伪类的选择器。
13. :in-range 选择处于指定范围内的范围输入（range input）元素。
  范围输入元素是指input类型为range的输入字段，用户可以通过该字段在指定的范围内滑动或选择值。
  当范围输入元素的值处于指定范围内时，即满足最小值（min）和最大值（max）的条件，该元素将符合 :in-range 伪类的选择器。
14. :out-of-range 选择处于指定范围之外的范围输入（range input）元素。
  范围输入元素是指input类型为range的输入字段，用户可以通过该字段在指定的范围内滑动或选择值。
  当范围输入元素的值超出了指定的范围，即不满足最小值（min）和最大值（max）的条件时，该元素将符合 :out-of-range 伪类的选择器。
15. :required 选择必填字段（required fields）的输入元素。
  当输入元素被标记为必填字段，即添加了 required 属性时，该元素将符合 :required 伪类的选择器。
16. :optional 选择可选字段（optional fields）的输入元素。
  当输入元素没有被标记为必填字段，即没有添加 required 属性时，该元素将符合 :optional 伪类的选择器。
17. :user-valid 描述选择用户自定义的有效输入内容。
  当用户通过自定义规则或JavaScript验证，使输入字段被标记为有效时，该字段将符合 :user-valid 伪类的选择器。
18. :user-invalid 用户自定义的无效输入内容。
  当用户通过自定义规则或JavaScript验证，使输入字段被标记为无效时，该字段将符合 :user-invalid 伪类的选择器。
用户动作伪类（User Action Pseudo-classes）：用于选择具有特定用户交互状态的元素。
动态伪类根据用户与元素的交互事件或状态来选择元素，并应用相应的样式。这些伪类可以根据鼠标操作或元素本身状态的变化来选择元素。
以下是几个常见的动态伪类选择器：
1. :hover 选择鼠标悬停在元素上的状态
2. :active 选择元素在被用户激活（被点击并按下）时的状态
3. :focus 选择当前获取焦点的元素
4. :focus-visible 选择当前具有可见焦点的元素。这个伪类主要用于与键盘交互的用户界面，帮助提供更好的可访问性。
  通常，当一个元素被聚焦时，会添加默认的焦点样式，比如边框或阴影。然而，某些情况下，这些默认样式可能不适用或不需要。:focus-visible 伪类允许开发者自定义只有在焦点是可见的情况下应用的样式。
5. :focus-within 选择包含当前具有焦点元素的父元素或祖先元素。
  当一个元素或其内部的任何子元素被聚焦时，该元素将处于 "focus-within" 状态。可以使用 :focus-within 伪类来对包含聚焦元素的父元素或祖先元素应用特定的样式。
这些动态伪类可以应用于各种元素，包括链接、按钮、表单元素等。它们允许开发人员为用户与元素交互时提供反馈和样式化，以增强用户体验。

需要注意的是，动态伪类只在特定的交互事件或状态下应用样式，一旦交互事件或状态结束，样式也会恢复到原始状态。
否定伪类（The negation pseudo-class）：用于选中不满足指定选择器的元素
该伪类常用于排除某些特定的元素，从而为其余元素应用样式。通过使用 :not 伪类，可以选择除了指定选择器匹配的元素之外的所有元素。
位置伪类（Location Pseudo-classes）：用于根据元素在文档中的位置进行选择

以下是一些常见的位置伪类：
1. :any-link 选择具有超链接的元素，它匹配未访问过的链接和已访问过的链接
2. :link 选择未被访问过的链接
3. :visited 选择已被访问过的链接
4. :local-link 选择本地链接的CSS伪类。本地链接是指指向同一HTML文档中的位置的链接，以区别于外部链接。
5. :target 选中并样式化当前URL的目标元素。URL的目标元素是URL片段标识符（即紧随“#”符号的部分）所指向的元素。在URL中，通过添加片段标识符来指示页面中的特定部分或元素。:target 伪类可以用来选中与URL的片段标识符匹配的元素，并对其应用特定的样式。
6. :target-within 选择被活动锚点（<a>标签中的href属性指向当前URL中指定的锚点）所包含的元素。通常，在文档中的锚点链接被点击时，与锚点匹配的元素将成为活动状态。使用:target-within 伪类，您可以选择该活动元素的父级元素或祖先元素，以便对其应用特定的样式。
7. :scope 选择与当前选择器匹配的元素自身。使用 :scope 伪类可以更精确地选择当前元素，而不仅仅是其子元素或后代元素。

用户评论

评论列表