css3新增伪类

1. `:root`：挑选文档的根元素，一般用于设置大局款式。2. `:not`：挑选不匹配指定挑选器的元素。3. `:target`：挑选当时活动的锚点（如经过 URL 锚点跳转到的元素）。4. `:empty`：挑选不包含子节点的元素，子节点可所以元素节点或文本（包含空格）。5. `:enabled`：挑选启用的表单元素。6. `:disabled`：挑选禁用的表单元素。7. `:checked`：挑选被选中的表单元素，如单选框或复选框。8. `:indeterminate`：挑选不确定的表单元素，一般用于进度条。9. `:valid`：挑选验证经过的表单元素。10. `:invalid`：挑选验证失利的表单元素。11. `:inrange`：挑选值在指定规模内的表单元素。12. `:outofrange`：挑选值超出指定规模的表单元素。13. `:required`：挑选必填的表单元素。14. `:optional`：挑选可选的表单元素。15. `:readonly`：挑选只读的表单元素。16. `:readwrite`：挑选可读写的表单元素。17. `:lang`：挑选指定言语的元素，`language` 是一个言语代码，如 `:lang` 挑选一切英文内容的元素。18. `:nthchild`：挑选其父元素的 nth 个子元素。19. `:nthlastchild`：挑选其父元素的倒数第 nth 个子元素。20. `:nthoftype`：挑选其父元素中同类型元素的 nth 个。21. `:nthlastoftype`：挑选其父元素中同类型元素的倒数第 nth 个。22. `:firstchild`：挑选其父元素的榜首个子元素。23. `:lastchild`：挑选其父元素的最终一个子元素。24. `:onlychild`：挑选其父元素的仅有子元素。25. `:onlyoftype`：挑选其父元素中同类型元素的仅有一个。26. `:firstoftype`：挑选其父元素中同类型元素的榜首个。27. `:lastoftype`：挑选其父元素中同类型元素的最终一个。28. `:fullscreen`：挑选全屏形式的元素。29. `:focuswithin`：挑选其内部有元素取得焦点的元素。30. `:focusvisible`：挑选具有可见焦点（如键盘导航）的元素。

这些伪类能够独自运用，也能够与其他挑选器结合运用，以完成更准确的款式操控。在实践使用中，这些伪类有助于进步网页的可拜访性和呼应性。

CSS3 新增伪类：丰厚网页交互体会的利器

跟着网页规划的不断发展，CSS3 的出现为前端开发者带来了更多的可能性。其间，CSS3 新增的伪类挑选器极大地丰厚了网页的交互体会，使得网页元素的表现力愈加丰厚。本文将具体介绍 CSS3 新增的伪类挑选器，协助开发者更好地了解和使用这些特性。

一、CSS3 伪类的概述

伪类（Pseudo-classes）是 CSS3 中的一种特别挑选器，用于挑选具有特定状况或条件的元素。与类挑选器比较，伪类不需要在 HTML 元素上显式增加类名，而是经过 CSS 挑选器直接指定。CSS3 新增的伪类挑选器首要包含以下几类：

- 动态伪类：用于挑选具有特定交互状况的元素，如鼠标悬停、点击等。

- 结构伪类：用于挑选具有特定结构联系的元素，如榜首个子元素、最终一个子元素等。

- UI 伪类：用于挑选具有特定用户界面状况的元素，如选中的复选框、禁用的表单元素等。

- 言语伪类：用于挑选具有特定言语特点的元素。

二、CSS3 动态伪类

- :link：挑选未被拜访过的超链接。

示例代码：

```css

a:link {

color: blue;

```

- :visited：挑选已被拜访过的超链接。

示例代码：

```css

a:visited {

color: purple;

```

- :hover：挑选鼠标悬停在上面的元素。

示例代码：

```css

div:hover {

background-color: f0f0f0;

```

- :active：挑选正在被点击的元素。

示例代码：

```css

button:active {

background-color: ccc;

```

- :focus：挑选取得焦点的元素。

示例代码：

```css

input:focus {

border: 1px solid 0095ff;

```

三、CSS3 结构伪类

- :first-child：挑选其父元素下的榜首个子元素。

示例代码：

```css

ul li:first-child {

color: red;

```

- :last-child：挑选其父元素下的最终一个子元素。

示例代码：

```css

ul li:last-child {

color: green;

```

- :nth-child(n)：挑选其父元素下的第 n 个子元素。

示例代码：

```css

ul li:nth-child(3) {

color: blue;

```

- :first-of-type：挑选其父元素下榜首个同类型的子元素。

示例代码：

```css

p:first-of-type {

font-weight: bold;

```

四、CSS3 UI 伪类

- :checked：挑选选中的复选框或单选按钮。

示例代码：

```css

input[type=\