1、使用结构性伪类选择器
使用结构性伪类选择器能够根据元素在文档中的位置选择元素。前缀为（：）
1.1、使用根元素选择器
:root选择器：匹配文档中的根元素。用得最少，总是返回html元素。
<style type="text/css"> :root { border: thin black solid; padding: 4px; } </style> 边框包着整个文档。
1.2、使用子元素选择器
子元素选择器：匹配直接包含在其他元素中的单个元素。
- 使用:first-child选择器
: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选择器
:last-child选择器：匹配由包含它们的元素定义的最后一个元素。
<style type="text/css"> :last-child { border: thin black solid; padding: 4px; } </style>
- 使用:only-child选择器
:only-child选择器匹配父元素包含的唯一子元素。
<style type="text/css"> :only-child { border: thin black solid; padding: 4px; } </style>
- 使用:only-of-type选择器
:only-of-type选择器匹配父元素定义类型的唯一子元素。
<style type="text/css"> :only-of-type { border: thin black solid; padding: 4px; } </style>
1.3、使用:nth-child p选择器
与子元素选择器类似，但使用这类选择器可以指定一个索引以匹配特定位置的元素。
索引从1开始。
<style type="text/css"> body > :nth-child(2) { border: thin black solid; padding: 4px; } </style>
⚠️nth-child选择器与常规子选择器的作用一样，只是加了个索引值。
