在现代网页设计中，CSS3 的出现无疑为开发者们提供了更多的可能性和灵活性。其中，新增的选择器功能更是让样式控制变得更加精准与高效。今天，我们就来探讨一下 CSS3 中那些令人兴奋的新选择器，并通过一些练习题帮助大家更好地理解和掌握这些强大的工具。

CSS3 新增选择器概述

1. 属性选择器

属性选择器允许我们根据元素的属性及属性值来选取元素。例如：

- `[type="text"]` 用于选取所有 type 属性值为 "text" 的输入框。

- `[hreflang|="en"]` 用于选取所有 hreflang 属性值以 "en" 开头的链接。

2. 伪类选择器

伪类选择器可以用来定义元素在特定状态下的样式。比如：

- `:nth-child(n)` 用于选取父元素中的第 n 个子元素。

- `:not(selector)` 用于选取不匹配给定选择器的元素。

3. 结构伪类选择器

这些选择器基于文档树中的位置关系来选择元素。例如：

- `:first-child` 和 `:last-child` 分别选取第一个和最后一个子元素。

- `:empty` 用于选取没有子节点的元素。

4. UI 元素状态伪类

这些伪类用于处理用户界面相关的交互效果。如：

- `:hover` 当用户悬停在元素上时应用样式。

- `:focus` 当元素获得焦点时应用样式。

练习题

为了加深理解，下面是一些基础练习题：

1. 哪个选择器可以用来选取所有带有 title 属性的段落？

A) `p[title]`

B) `[title]p`

C) `ptitle`

D) `p.title`

2. 下列哪个选项能够正确地选取所有奇数行的表格单元格？

A) `td:nth-child(odd)`

B) `tr:nth-child(odd) td`

C) `td:nth-of-type(odd)`

D) `tr:nth-of-type(odd) td`

3. 如果想要选中一个按钮，当它被点击后改变颜色，应该使用哪个伪类？

A) `:active`

B) `:visited`

C) `:checked`

D) `:disabled`

通过以上题目，大家可以尝试自己动手编写代码测试答案是否正确。这不仅有助于记忆这些新选择器的功能，也能提高实际操作能力。

总之，CSS3 的新增选择器极大地丰富了我们的设计语言，使得页面布局更加多样化且易于维护。希望今天的分享能给大家带来启发，在今后的设计工作中灵活运用这些技巧！