笔记｜使用CSS选择器（使用结构性伪类选择器）

2022-10-09 91

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 使用结构性伪类选择器

1、使用结构性伪类选择器

使用结构性伪类选择器能够根据元素在文档中的位置选择元素。前缀为（：）

1.1、使用根元素选择器

:root选择器：匹配文档中的根元素。用得最少，总是返回html元素。

<style type="text/css">
:root {
border: thin black solid;
padding: 4px;
}
</style> 
边框包着整个文档。

子元素选择器：匹配直接包含在其他元素中的单个元素。

:first-child选择器：匹配由包含它们的元素（父元素）定义的第一个子元素。

<style type="text/css">  
 :first-child {
border: thin black solid;
padding: 4px;
}
</style>      
匹配任意元素的第一个子元素。

将:first-child选择器用做修饰符，或跟其他选择器组合使用可以缩小选中元素的范围。

<style type="text/css">
p > span:first-child {
border: thin black solid;
padding: 4px;
}
</style>
匹配作为p元素第一个子元素的任意span元素。

:last-child选择器：匹配由包含它们的元素定义的最后一个元素。

<style type="text/css">
:last-child {
border: thin black solid;
padding: 4px;
}
</style>

:only-child选择器匹配父元素包含的唯一子元素。

<style type="text/css">
:only-child {
border: thin black solid;
padding: 4px;
}
</style>

:only-of-type选择器匹配父元素定义类型的唯一子元素。

<style type="text/css">
:only-of-type {
border: thin black solid;
padding: 4px;
}
</style>

与子元素选择器类似，但使用这类选择器可以指定一个索引以匹配特定位置的元素。

索引从1开始。

<style type="text/css">
body > :nth-child(2) {
border: thin black solid;
padding: 4px;
}
</style>

⚠️nth-child选择器与常规子选择器的作用一样，只是加了个索引值。