css 结构性伪类选择器

结构伪类选择器，是针对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;
}