3.1 伪类 :first-child
CSS中的结构伪类可以根据元素在文档树中的位置选择和样式化元素。
这对于创建更精准和详细的样式特别有用，应用于特定元素。
来看看伪类 :first-child, :last-child, :nth-child 和 :nth-of-type。
伪类 :first-child 选择它父元素的第一个子元素。这对于给一组相似元素中的第一个元素设置样式很有用，比如列表或段落。
语法：
选择器:first-child {
属性: 值;
}
使用示例
在这个示例中，列表的第一个元素用粗体和红色显示，而 div 中的第一个段落转换为大写：
/* 列表第一个元素的样式化 */
li:first-child {
font-weight: bold;
color: red;
}
/* div 中第一个段落的样式化 */
div p:first-child {
text-transform: uppercase;
}
3.2 伪类 :last-child
伪类 :last-child 选择它父元素的最后一个子元素。它用于
给一组相似元素中的最后一个元素设置样式。
语法：
选择器:last-child {
属性: 值;
}
使用示例
在这个示例中，列表的最后一个元素用斜体和蓝色显示，而 div 中的最后一个段落用下划线标出：
/* 列表最后一个元素的样式化 */
li:last-child {
font-style: italic;
color: blue;
}
/* div 中最后一个段落的样式化 */
div p:last-child {
text-decoration: underline;
}
3.3 伪类 :nth-child
伪类 :nth-child 允许根据它们在组中的位置选择元素。它接受一个参数，
该参数定义了将选择哪些元素。参数可以是数字、关键字或表达式。
语法：
选择器:nth-child(参数) {
属性: 值;
}
参数：
- 数字：选择指定位置的元素
- 关键字：
odd（奇数）和even（偶数） - 表达式：格式
an+b，其中a和b是数字
示例 1: 选择奇数元素
在这个示例中，为所有奇数列表元素设置浅灰色背景：
/* 奇数列表元素的样式化 */
li:nth-child(odd) {
background-color: #f0f0f0;
}
示例 2: 选择指定位置的元素
在这个示例中，列表的第三个元素用粗体和绿色显示：
/* 列表的第三个元素的样式化 */
li:nth-child(3) {
font-weight: bold;
color: green;
}
示例 3: 使用表达式
在这个示例中，每隔两个元素从第一个开始设置浅灰色背景：
/* 每隔两个元素从第一个开始的样式化 */
li:nth-child(2n+1) {
background-color: #e0e0e0;
}
3.4 伪类 :nth-of-type
伪类 :nth-of-type 类似于 :nth-child，但它选择基于其父元素中类型的元素。
这允许选择特定类型的元素，即使它们不是其父元素的第一个子元素。
语法：
选择器:nth-of-type(参数) {
属性: 值;
}
参数：
- 数字：选择相同类型的元素中的指定位置的元素
- 关键字：
odd（奇数）和even（偶数） - 表达式：格式
an+b，其中a和b是数字
示例 1: 选择偶数段落
在这个示例中，所有偶数段落设置浅灰色背景：
/* 偶数段落的样式化 */
p:nth-of-type(even) {
background-color: #d0d0d0;
}
示例 2: 选择同类型中指定位置的元素
在这个示例中，第二个 h2 标题放大并设置为橙色：
/* 第二个 h2 标题的样式化 */
h2:nth-of-type(2) {
font-size: 2em;
color: orange;
}
示例 3: 使用表达式
在这个示例中，每隔三个元素从第二个开始设置浅灰色背景：
/* 每隔三个元素从第二个开始的样式化 */
li:nth-of-type(3n+2) {
background-color: #c0c0c0;
}
GO TO FULL VERSION