结构伪类选择器，是针对HTML层次“结构”的伪类选择器。例如我们想要某一个父元素下面的第n个子元素。
| 选择器 | 含义 |
|---|---|
| :root | 匹配文档树的根元素。应用到HTML，:root 即表示为元素，除了优先级更高外，相当于html标签选择器。 |
| E:not() | 排除结构元素E下的某子结构元素。 |
| E:empty | 空元素是指没有任何内容的元素，甚至空格都不行。代表没有子元素的元素。 |
| E:target | 对页面中某个target元素指定样式。该样式只在用户点击该链接并且跳转到target元素后生效 |
| 选择器 | 含义 |
|---|---|
| E:nth-child(n) |
选择所有在其父元素中第n个位置的匹配E的子元素。
注意，参数n可以是数字（1、2、3）、关键字（odd、even）、公式（2n、2n+3） 参数的索引从1开始。tr:nth-child(3)匹配所有表格中第3排的tr； tr:nth-child(2n+1)匹配所有表格的奇数行；tr:nth-child(2n)匹配所有表格的偶数行； tr:nth-child(odd)匹配所有表格的奇数行；tr:nth-child(even)匹配所有表格的偶数行； |
| E:nth-last-child(n) | 选择所有在其父元素中倒数第n个位置的匹配E的子元素 |
| E:nth-of-type(n) |
选择父元素中第n个位置，且匹配E的子元素。
所有匹配E的子元素被分离出来单独排序。非E的子元素不参与排序。 参数n可以是数字，关键字、公式。例：p:nth-of-type(1) |
| E:nth-last-of-type(n) | 选择父元素中倒数第n个位置，且匹配E的子元素。 |
| E:last-child | 选择位于其父元素中最后一个位置，且匹配E的子元素。 |
| E:first-of-type | 选择位于其父元素中且匹配E的第一个同类型的子元素。 |
| E:last-of-type | 选择位于其父元素中且匹配E的最后第一个同类型的子元素。 |
| E:only-child | 选择其父元素只包含一个子元素，且该子元素匹配E。 |
| E:only-of-type | 选择其父元素只包含一个同类型的子元素，且该子元素匹配E。 |
:not
选择除某个元素之外的所有元素。
CSS：
:root {
--border: 1px solid #666;
--green: lightgreen;
--coral: lightcoral;
--blue: blue;
--yellow: yellow;
}
div {
float: left;
margin-left: 10px;
width: 100px;
height: 50px;
border: var(--border);
background-color: var(--green);
}
div:not(.item) {
background-color: var(--coral);
}
HTML：
<div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="diff"></div> <div class="item"></div>
:empty
选择没有任何内容的元素(有空格也不行)。
CSS：
div:empty{
background-color: var(--coral);
}
HTML：
<div> </div> <div>1231</div> <div>abc/div> <div>*()_</div> <div>...</div> <div></div>
:target
表示一个唯一的元素（目标元素），其ID与URL的片段匹配
CSS：
#first:target{
background-color: var(--coral);
}
#second:target{
background-color: var(--blue);
}
#third:target{
background-color: var(--yellow);
}
HTML：
<a href="#first">first</a> <a href="#second">second</a> <a href="#third">third</a> <div id="first"></div> <div id="second"></div> <div id="third"></div>
九个CSS3结构性伪类选择器。
/*结构选择器：获去当前元素的第一个子元素*/
li:first-child {
background-position: 2px 10px;
font-weight: bold;
font-style: initial;
font-size: 12px;
}
/*结构选择器：获去当前元素的最后一个子元素*/
li:last-child {
background-position: 2px 10px;
font-weight: bolder;
font-style: normal;
font-size: 14px;
}
/*结构选择器：选择某个元素的一个或者多个特定的子元素*/
li:nth-child(3) {
background-position: 2px 10px;
font-weight: bolder;
font-style: normal;
font-size: 18px;
}
/*结构选择器：选择某个元素的一个或者多个特定的子元素;从这个元素的最后一个子元素开始获取*/
li:nth-last-child(2) {
background-position: 2px 10px;
font-weight: bolder;
font-style: normal;
font-size: 20px;
}
/*结构选择器：选择特定的元素*/
li:nth-of-type(2) {
background-position: 2px 10px;
font-weight: bolder;
font-style: normal;
font-size: 20px;
}
/*结构选择器：选择特定的元素;从这个元素的最后一个元素开始获取*/
li:nth-last-of-type(2) {
background-position: 2px 10px;
font-weight: bolder;
font-style: normal;
font-size: 20px;
}
/*结构选择器：选择一个上级元素下的第一个同类子元素*/
li:first-of-type {
background-position: 2px 10px;
font-weight: bolder;
font-style: normal;
font-size: 20px;
}
/*结构选择器：选择一个上级元素下的最后一个同类子元素*/
li:last-of-type {
background-position: 2px 10px;
font-weight: bolder;
font-style: normal;
font-size: 20px;
}
/*结构选择器：选择的元素是他父元素的唯一一个元素*/
li:only-child {
background-position: 2px 10px;
font-weight: bolder;
font-style: normal;
font-size: 20px;
}
/*结构选择器：选择的元素是他上级元素的唯一一个相同类型的子元素*/
li:only-of-type {
background-position: 2px 10px;
font-weight: bolder;
font-style: normal;
font-size: 20px;
}
/*结构选择器：现在的元素里面没有任何的内容*/
li:empty {
background-position: 2px 10px;
font-weight: bolder;
font-style: normal;
font-size: 20px;
}