1. 概述
结构化伪类选择器是指通过选择元素在文档中的位置来匹配元素的一种选择器。它可以选择父元素、子元素、兄弟元素等,是CSS中非常常用的选择器之一。
2. 父元素选择器
2.1 :nth-child()
:nth-child()选择器可以选择父元素中的第n个子元素,但需要注意的是,nth-child()是从1开始计数的。
/* 选择第3个p元素 */
p:nth-child(3) {
color: red;
}
上述代码选择文档中第3个p元素,并将其文字颜色设置为红色。
2.2 :first-child和:last-child
:first-child选择器可以选择父元素中的第一个子元素,:last-child选择器可以选择父元素中的最后一个子元素。
/* 选择第一个p元素 */
p:first-child {
font-weight: bold;
}
/* 选择最后一个p元素 */
p:last-child {
font-style: italic;
}
上述代码分别选择文档中第一个和最后一个p元素,并将它们的样式设置为加粗和斜体。
3. 子元素选择器
3.1 :nth-of-type()
:nth-of-type()选择器可以选择父元素中相同类型的子元素中的第n个子元素。
/* 选择div中第3个p元素 */
div p:nth-of-type(3) {
background-color: yellow;
}
上述代码选择文档中第3个div中的p元素,并将它的背景颜色设置为黄色。
3.2 :first-of-type和:last-of-type
:first-of-type选择器可以选择父元素中相同类型的子元素中的第一个子元素,:last-of-type选择器可以选择父元素中相同类型的子元素中的最后一个子元素。
/* 选择div中第一个p元素 */
div p:first-of-type {
color: blue;
}
/* 选择div中最后一个p元素 */
div p:last-of-type {
color: green;
}
上述代码分别选择文档中第一个和最后一个div中的p元素,并将它们的文字颜色分别设置为蓝色和绿色。
4. 兄弟元素选择器
4.1 :nth-of-type()
:nth-of-type()选择器可以选择父元素中相同类型的兄弟元素中的第n个兄弟元素。
/* 选择div的第2个后续兄弟元素 */
div ~ p:nth-of-type(2) {
text-decoration: underline;
}
上述代码选择文档中div后面的第2个p元素,并将它的文本添加下划线。
4.2 :first-of-type和:last-of-type
:first-of-type选择器可以选择父元素中相同类型的兄弟元素中的第一个兄弟元素,:last-of-type选择器可以选择父元素中相同类型的兄弟元素中的最后一个兄弟元素。
/* 选择div的第一个后续兄弟元素 */
div ~ p:first-of-type {
font-size: 24px;
}
/* 选择div的最后一个后续兄弟元素 */
div ~ p:last-of-type {
font-size: 12px;
}
上述代码分别选择文档中div后面的第一个和最后一个p元素,并将它们的字体大小分别设置为24px和12px。
5. 总结
结构化伪类选择器是CSS中常用的选择器之一,它可以选择父元素中的子元素、相同类型的兄弟元素等。掌握好这些选择器的用法,可以更加方便地对文档进行样式控制。