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 新增的伪类选择器主要包括以下几类:
- 动态伪类:用于选择具有特定交互状态的元素,如鼠标悬停、点击等。
- 结构伪类:用于选择具有特定结构关系的元素,如第一个子元素、最后一个子元素等。
![](https://ps.ssl.qhimg.com/t02db0a98826fa3e481.jpg)
- UI 伪类:用于选择具有特定用户界面状态的元素,如选中的复选框、禁用的表单元素等。
- 语言伪类:用于选择具有特定语言属性的元素。
二、CSS3 动态伪类
- :link:选择未被访问过的超链接。
![](https://ps.ssl.qhimg.com/t0252340221703748f7.jpg)
示例代码:
```css
a:link {
color: blue;
```
- :visited:选择已被访问过的超链接。
![](https://ps.ssl.qhimg.com/t02b778effc30875235.jpg)
示例代码:
```css
a:visited {
color: purple;
```
- :hover:选择鼠标悬停在上面的元素。
示例代码:
```css
div:hover {
background-color: f0f0f0;
```
- :active:选择正在被点击的元素。
示例代码:
```css
button:active {
background-color: ccc;
```
- :focus:选择获得焦点的元素。
![](https://ps.ssl.qhimg.com/t02ffa2ff54ace84090.jpg)
示例代码:
```css
input:focus {
border: 1px solid 0095ff;
```
三、CSS3 结构伪类
- :first-child:选择其父元素下的第一个子元素。
示例代码:
```css
ul li:first-child {
color: red;
```
- :last-child:选择其父元素下的最后一个子元素。
![](https://ps.ssl.qhimg.com/t02c29b01a01878a0b6.jpg)
示例代码:
```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=\