CSS日常总结--CSS伪类

文章目录

CSS日常总结--CSS伪类
- 前言
- 1.结构性伪类:
- - [1. :first-child：选择父元素下的第一个子元素](#1. :first-child：选择父元素下的第一个子元素)
  - [2. :last-child：选择父元素下的最后一个子元素](#2. :last-child：选择父元素下的最后一个子元素)
  - [3. :nth-child(n)：选择父元素下的第n个子元素](#3. :nth-child(n)：选择父元素下的第n个子元素)
  - [4. :nth-last-child(n)：从最后一个子元素开始计数，选择第n个子元素](#4. :nth-last-child(n)：从最后一个子元素开始计数，选择第n个子元素)
  - [5. :nth-of-type(n)：选择与同类型的兄弟元素中的第n个元素](#5. :nth-of-type(n)：选择与同类型的兄弟元素中的第n个元素)
  - [6. :nth-last-of-type(n)：从同类型的兄弟元素的最后一个开始计数，选择第n个元素](#6. :nth-last-of-type(n)：从同类型的兄弟元素的最后一个开始计数，选择第n个元素)
  - [7. :first-of-type：选择同类型的兄弟元素中的第一个元素](#7. :first-of-type：选择同类型的兄弟元素中的第一个元素)
  - [8. :last-of-type：选择同类型的兄弟元素中的最后一个元素](#8. :last-of-type：选择同类型的兄弟元素中的最后一个元素)
  - [9. :only-child：选择是其父元素中唯一的子元素的元素](#9. :only-child：选择是其父元素中唯一的子元素的元素)
  - [10. :only-of-type：选择是其父元素中唯一的特定类型的子元素的元素](#10. :only-of-type：选择是其父元素中唯一的特定类型的子元素的元素)
- 2.功能性伪类:
- - 1.:not(selector)：选择不匹配给定选择器的元素
- 3.界面状态伪类:
- - [1. :hover：鼠标悬停时应用的样式](#1. :hover：鼠标悬停时应用的样式)
  - [2. :active：元素被激活时应用的样式](#2. :active：元素被激活时应用的样式)
  - [3. :focus：元素获得焦点时应用的样式](#3. :focus：元素获得焦点时应用的样式)
- 4.界面结构伪类:
- - [1. :target：选择当前活动的目标元素](#1. :target：选择当前活动的目标元素)
- 5.链接伪类:
- - [1. :link：选择未被访问的链接](#1. :link：选择未被访问的链接)
  - [2. :visited：选择已被访问的链接](#2. :visited：选择已被访问的链接)
- 6.动态变化伪类:
- - [1. :focus-within：选择包含有焦点元素的元素](#1. :focus-within：选择包含有焦点元素的元素)
- 7.表单伪类:
- - [1. :checked：选择被选中的表单元素](#1. :checked：选择被选中的表单元素)
  - [2. :disabled：选择被禁用的表单元素](#2. :disabled：选择被禁用的表单元素)
  - [3. :enabled：选择处于启用状态的表单元素](#3. :enabled：选择处于启用状态的表单元素)
- 8.其他伪类：
- - [1. :empty ：选择没有子元素的元素](#1. :empty ：选择没有子元素的元素)
  - [2. :is()：选择器匹配元素，类比组合选择器](#2. :is()：选择器匹配元素，类比组合选择器)
  - [3. :where()：选择器匹配元素，优先级低](#3. :where()：选择器匹配元素，优先级低)
  - [4. :has()：选择器匹配元素](#4. :has()：选择器匹配元素)
  - [5. :matches():多条件支持](#5. :matches():多条件支持)

前言

CSS伪类是一种允许选择文档中特定状态或位置的CSS选择器。它们用于选择不同状态下的元素，而无需改变HTML标记的内容。伪类以冒号（:）开头，紧随其后的是伪类的名称。它们与选择器结合使用，以定义在特定条件下应用的样式。伪类的主要作用是允许开发者根据用户的交互、文档结构或其他条件来选择元素，从而实现更加动态和交互性的样式。

1.结构性伪类:

1. :first-child：选择父元素下的第一个子元素

选择父元素下的第一个子元素。

css 复制代码

li:first-child {
  color: red;
}

2. :last-child：选择父元素下的最后一个子元素

选择父元素下的最后一个子元素。

css 复制代码

li:last-child {
  color: blue;
}

3. :nth-child(n)：选择父元素下的第n个子元素

选择父元素下的第n个子元素。

css 复制代码

li:nth-child(odd) {
  background-color: #f2f2f2;
}

4. :nth-last-child(n)：从最后一个子元素开始计数，选择第n个子元素

从最后一个子元素开始计数，选择第n个子元素。

css 复制代码

li:nth-last-child(2) {
  font-weight: bold;
}

5. :nth-of-type(n)：选择与同类型的兄弟元素中的第n个元素

选择与同类型的兄弟元素中的第n个元素。

css 复制代码

p:nth-of-type(2n) {
  color: green;
}

6. :nth-last-of-type(n)：从同类型的兄弟元素的最后一个开始计数，选择第n个元素

从同类型的兄弟元素的最后一个开始计数，选择第n个元素。

css 复制代码

p:nth-last-of-type(odd) {
  text-decoration: underline;
}

7. :first-of-type：选择同类型的兄弟元素中的第一个元素

选择同类型的兄弟元素中的第一个元素。

css 复制代码

h2:first-of-type {
  font-size: 24px;
}

8. :last-of-type：选择同类型的兄弟元素中的最后一个元素

选择同类型的兄弟元素中的最后一个元素。

css 复制代码

span:last-of-type {
  border: 1px solid #ccc;
}

9. :only-child：选择是其父元素中唯一的子元素的元素

选择是其父元素中唯一的子元素的元素。

css 复制代码

div:only-child {
  background-color: yellow;
}

10. :only-of-type：选择是其父元素中唯一的特定类型的子元素的元素

选择是其父元素中唯一的特定类型的子元素的元素。

css 复制代码

p:only-of-type {
  color: purple;
}

2.功能性伪类:

1.:not(selector)：选择不匹配给定选择器的元素

选择不匹配给定选择器的元素。

css 复制代码

input:not([type="submit"]) {
  border: 1px solid #999;
}

3.界面状态伪类:

1. :hover：鼠标悬停时应用的样式

鼠标悬停时应用的样式。

css 复制代码

a:hover {
  color: orange;
}

2. :active：元素被激活时应用的样式

元素被激活时（例如，按钮被按下）应用的样式。

css 复制代码

button:active {
  background-color: #ccc;
}

3. :focus：元素获得焦点时应用的样式

元素获得焦点时应用的样式，通常与表单元素一起使用。

css 复制代码

input:focus {
  border: 2px solid blue;
}

4.界面结构伪类:

1. :target：选择当前活动的目标元素

选择当前活动的目标元素，通常与页面内链接（锚点）一起使用。

css 复制代码

#section1:target {
  background-color: lightyellow;
}

5.链接伪类:

1. :link：选择未被访问的链接

选择未被访问的链接。

css 复制代码

a:link {
  color: blue;
}

2. :visited：选择已被访问的链接

选择已被访问的链接。

css 复制代码

a:visited {
  color: purple;
}

6.动态变化伪类:

1. :focus-within：选择包含有焦点元素的元素

选择包含有焦点元素的元素。

css 复制代码

form:focus-within {
  border: 2px solid #555;
}

7.表单伪类:

1. :checked：选择被选中的表单元素

选择被选中的表单元素，例如复选框或单选按钮。

css 复制代码

input[type="checkbox"]:checked {
  border-color: green;
}

2. :disabled：选择被禁用的表单元素

选择被禁用的表单元素。

css 复制代码

input:disabled {
  background-color: #eee;
}

3. :enabled：选择处于启用状态的表单元素

选择处于启用状态的表单元素。

css 复制代码

input:enabled {
  background-color: #fff;
}

8.其他伪类：

1. :empty ：选择没有子元素的元素

选择没有子元素的元素。

css 复制代码

p:empty {
  display: none;
}

2. :is()：选择器匹配元素，类比组合选择器

用法：:is(selector) 或 :matches(selector)
示例：选择所有段落和标题元素，其中至少一个具有类名为 "important" 的元素。
:is() 伪类允许您组合多个选择器，只要其中至少一个选择器匹配元素，整个选择器就匹配。这有助于简化复杂的选择器，提高代码的可读性。
css 复制代码
```
:is(p, h1, h2, h3):is(.important)
```

3. :where()：选择器匹配元素，优先级低

用法：:where(selector) 或 :matches(selector)
示例：选择所有段落和标题元素，其中至少一个具有类名为 "important" 的元素。
:where() 与 :is() 类似，允许组合多个选择器。与 :is() 不同的是，:where() 不会影响特异性，因此它更适合用于提高代码的可读性而不引入额外的特异性。
css 复制代码
```
:where(p, h1, h2, h3):where(.important)
```

4. :has()：选择器匹配元素

用法：:has(selector)
示例：选择所有包含至少一个带有类名为 "highlight" 的子元素的 div 元素。
:has() 伪类用于选择包含特定后代的元素。如果指定的选择器匹配元素的后代，那么包含这些后代的元素就会被选择。这在需要选择包含特定内容的父元素时非常有用。
css 复制代码
```
div:has(.highlight)
```

5. :matches():多条件支持

:matches()多条件支持：允许在一个选择器中同时匹配多个条件，类似于逗号分隔的选择器列表，但更灵活。

css 复制代码

p:matches(:hover, :active) {}