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=\