12、掌握CSS3高级选择器：精确定位与样式化HTML元素

掌握CSS3高级选择器：精确定位与样式化HTML元素

1. 选择第一个、最后一个和唯一实例

CSS3引入了一系列伪类，使我们能够更精确地选择特定位置的元素，而无需依赖额外的HTML标记。这些伪类包括 first-child 、 last-child 、 only-child 及其变体。

:first-child 和 :last-child

:first-child 伪类选择的是其父元素的第一个子元素，而 :last-child 则选择最后一个子元素。这两个伪类非常有用，特别是在处理导航栏和列表时。

#nav > li:first-child a {
    border-radius: 10px 0 0 10px;
}

#nav > li:last-child a {
    border-radius: 0 10px 10px 0;
}

上面的代码通过圆角边框样式美化了导航栏的第一项和最后一项链接。

:first-of-type 、 :last-of-type 和 :only-of-type

这些伪类基于元素类型进行选择。 :first-of-type 选择的是其父元素中第一个出现