1. 介绍
在CSS中，伪类是非常重要的概念。伪类是一个可以在选择器后面的冒号后面定义附加特殊效果的关键字。CSS3新增了许多伪类，它们可以让页面具有更多的交互性，使得开发者能够更加灵活地处理HTML元素。本文将会详细介绍CSS3新增的伪类。
2. CSS3新增的伪类
2.1 :target
:target 伪类表示选中了当前窗口的活动的锚点。如果使用了这个伪类，那么在页面上选择对应 ID 的元素会被突出显示。这个伪类对于创建网页内部链接非常有用。
:target {
background-color: yellow;
}
上面的代码表示在页面上选中 ID 为 target 的元素时，元素的背景颜色会变为黄色。
2.2 :checked
:checked 伪类可以被用于表示被选中的表单元素。这个伪类非常有用，在需要实现一些可交互的设计时很常用。
input:checked + label {
font-weight: bold;
}
当input元素被选中时，它的下一个元素 label 的文本将会变为粗体。
2.3 :not
:not 伪类接受一个简单选择器作为参数，表示除了选中的元素以外的所有元素。使用:not，可以非常灵活地创建CSS样式。
p:not(:first-child) {
color: red;
}
上面的代码将为所有不是第一个子元素的段落设置红色字体。
2.4 :empty
:empty 伪类表示一个空元素，也就是说没有任何子元素的元素。
p:empty {
height: 50px;
background-color: yellow;
}
上面的代码表示如果某个段落里面没有任何内容，那段落的高度会变为 50px，背景颜色会变成黄色。
2.5 :nth-child
:nth-child 伪类用于选择某个父元素下指定的子元素，可以让开发者非常精细地设计页面。它接受一个表示规律的表达式，该表达式使用n参数，例如nth-child(2n+1)，表示所有奇数子元素。
ul li:nth-child(odd) {
background-color: yellow;
}
上面的代码表示选择中的所有奇数元素，并设置它们的背景为黄色。
2.6 :first-of-type 和 :last-of-type
:first-of-type 伪类表示选中某种元素类型的第一个元素。它接受一个元素类型作为参数。
p:first-of-type {
font-size: 20px;
}
上面的代码表示第一个段落的字体大小为20px。
:last-of-type 则表示选中某种元素类型的最后一个元素。
p:last-of-type {
font-size: 20px;
}
上面的代码表示最后一个段落的字体大小为20px。
2.7 :disabled 和 :enabled
:disabled 伪类表示禁用的表单元素，:enabled 伪类表示启用的表单元素。
input:disabled {
background-color: #eee;
}
上面的代码表示当input元素被禁用时，它的背景颜色为灰色。
2.8 :hover
:hover 伪类表示当鼠标悬停在某个元素上时应用的样式。使用:hover伪类可以实现一些很有趣的动画效果。
a:hover {
color: red;
}
上面的代码表示当鼠标悬停在链接上时，链接的文本将会变成红色。
2.9 :nth-of-type
:nth-of-type 伪类表示选择某个元素类型中第n个元素。它接受一个表示规律的表达式，该表达式使用n参数，例如nth-of-type(2n+1)，表示所有奇数元素。
li:nth-of-type(5) {
color: red;
}
上面的代码仅仅选择了第5个元素，将文本设置为红色。
2.10 :root
:root 伪类表示文档根元素，也就是HTML元素。
:root {
font-size: 16px;
}
上面的代码表示将 HTML 的字体大小设为16px。
2.11 ::selection
::selection 伪类用来指定在选定文本时应用的样式。可以指定文本的颜色、背景色等等。
::selection {
color: red;
background-color: yellow;
}
上面的代码表示所选文本的颜色为红色，背景颜色为黄色。
3. 总结
CSS3新增的伪类使得CSS的能力得到了极大的拓展。通过使用这些伪类，开发者可以更加灵活地处理HTML元素，让网页拥有更多的交互性和美观性。在实际开发中，需要根据具体的需求选择不同的伪类，达到最好的效果。