请阐述CSS3新增伪类举例？

八股文_CSS面试题 0 56

CSS3新增了许多伪类，其中一些最常用的伪类包括：

:nth-child()：这个伪类用于选择父元素中符合特定顺序的子元素。例如，li:nth-child(2) 选择的是父元素中的第二个 li 元素。
:nth-of-type()：与 :nth-child() 类似，但它是基于元素的类型而不是顺序。比如，div:nth-of-type(2) 会选择父元素中第二个 div 类型的元素。
:not()：这个伪类允许你选择不符合特定条件的元素。例如，p:not(.special) 选择所有不具有 .special 类的 p 元素。
:first-of-type 和 :last-of-type：分别用于选择某一类型元素的第一个和最后一个子元素。例如，div:first-of-type 选择父元素中第一个 div 元素。
:focus：这个伪类用于选择当前获得焦点的元素，常用于表单元素。比如，input:focus 选择正在被输入的文本框。

这两个伪类有时很容易混淆，它们的区别在于选择的标准。nth-child() 是基于元素在父元素中的顺序来选择的，而 nth-of-type() 是基于相同类型元素的顺序。

:nth-child(n)： n 是一个数字、关键字或公式，可以是 odd、even，也可以是像 2n 这样的公式，用于选择每两个元素中的一个。例如：

ul li:nth-child(odd) { background-color: #f0f0f0; }  /* 选择所有奇数位置的li */
ul li:nth-child(2n) { background-color: #dcdcdc; }  /* 选择所有偶数位置的li */

:nth-of-type(n)：选择同类型元素的顺序位置。例如，如果你有多个不同类型的元素，但你只想选择某一类型元素的第 2 个，你就会使用 nth-of-type()。
```
div p:nth-of-type(2) { color: red; }  /* 选择父元素中第二个p元素 */
```

:not() 是一个非常有用的伪类，它允许我们排除某些元素，通常用于避免重复的 CSS 规则。它可以用于单个选择器或者组合选择器。

示例：

/* 选择所有非 .highlight 类的div */
div:not(.highlight) { background-color: yellow; }

这两个伪类分别用于选择某类型元素的第一个和最后一个子元素。它们与 :first-child 和 :last-child 类似，但后者是基于元素在父元素中的位置。

示例：

/* 选择父元素中第一个p元素 */
div p:first-of-type { font-weight: bold; }

/* 选择父元素中最后一个p元素 */
div p:last-of-type { font-style: italic; }

:focus 伪类用于选择当前被聚焦的元素，这在表单中非常有用。当一个输入框或按钮被选中并准备输入时，:focus 伪类就会生效。它常用于表单交互，帮助改善用户体验。

示例：

/* 当输入框获得焦点时，改变边框颜色 */
input:focus { border-color: blue; }

这些新增的伪类为 CSS 提供了更大的灵活性，能够选择和操作页面中的特定元素，简化了许多复杂的选择器和脚本逻辑的编写。理解它们的使用场景和细微区别，对于编写更高效的样式表非常重要。