CSS3中的结构伪类有哪些新功能？

CSS3引入了结构伪类，如::before、::after、::first-line和::first-letter，用于样式化文档结构。

CSS3结构伪类

CSS3中的结构伪类有哪些新功能？

CSS3引入了一系列新的结构伪类，这些伪类允许开发者基于文档的结构和关系选择元素，从而减少对class和ID属性的依赖，使HTML代码更加简洁和易于维护，以下是一些主要的结构伪类及其用途：

伪类名称	描述
:root	匹配文档的根元素，在HTML中通常是元素。
:not()	用于排除某个选择器指定的元素，不应用该选择器的样式。
:nth-child(n)	匹配属于其父元素的第n个子元素，n可以是数字、关键字或公式。
:first-child	匹配父元素的第一个子元素。
:last-child	匹配父元素的最后一个子元素。
:only-child	匹配作为其父元素唯一子元素的元素。
:empty	匹配没有子元素的元素。
:target	匹配当前活动的目标元素（通常是由URL中的片段标识符指定）。

使用示例

E:root

:root {
    border: 1px solid blue;
}

这将给所有页面元素加上蓝色边框，等同于html { border: 1px solid blue; }。

E:nth-child(n)

CSS3中的结构伪类有哪些新功能？

tr:nth-child(3) {
    /* 匹配所有表格里面排第3的行<tr> */
}
tr:nth-child(2n+1) {
    /* 2n+1，公式，匹配所有奇数行 */
}
tr:nth-child(odd) {
    /odd关键字，匹配所有奇数行 */
}
tr:nth-child(2n) {
    /2n匹配所有偶数行 */
}
tr:nth-child(even) {
    /even关键字，匹配所有偶数行 */
}

通过这个伪类，可以很容易地实现双背景色甚至多背景色表格等效果。

E:first-child 和 E:last-child

p:first-child {
    color: pink;
    font-size: 16px;
    font-family: "微软雅黑";
}
p:last-child {
    color: blue;
    font-size: 16px;
    font-family: "微软雅黑";
}

这将为父元素中的第一个或最后一个<p>元素设置特殊的文本样式。