CSS3-结构性伪类选择器
预定义
/* 这里预定义几个变量（自定义属性），方便后面使用 */
:root {
--green: #1dd1a1;
--red: #ff7979;
--blue: #7ed6df;
--yellow: #f9ca24;
--border: 1px solid #666;
}
/* 预定义一个选择器 */
div {
float: left;
margin-left: 10px;
width: 100px;
height: 50px;
border: var(--border);
background-color: var(--green);
}
:root
:root 匹配元素所在文档的根元素。在HTML文档中，根元素始终是<html>。
:root {
background-color: var(--blue);
}
<body><!-- 什么都没写 --></body>
:empty
:empty 选择没有任何内容的元素(有空格也不行)。
div:empty {
background-color: var(--red);
}
<div> </div>
<div>1231</div>
<div>abc</div>
<div>*()_</div>
<div>...</div>
<div></div>
:target
:target 表示一个唯一的元素（目标元素），其ID与URL的片段匹配。
#first:target {
background-color: var(--red);
}
#second:target {
background-color: var(--blue);
}
#third:target {
background-color: var(--yellow);
}
<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>
:first-child
:first-child 选择元素中的第一个子元素。
div:first-child {
background-color: var(--red);
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
:last-child
:last-child 选择元素的最后一个子元素。
div:last-child {
background-color: var(--red);
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
:nth-child(n)
:nth-child(n) 定位某个父元素的一个或多个特定的子元素。其中 n 是其参数。n 取值如下：
1.整数值(1 || 2 || 3 || 4 || ...)
参数n的起始值为1，不是0,若要选中第一个元素nth-child(1)。
2.表达式(2n+1 || -n+5 || ...)
为表达式时，n从0开始，表达式的值为0或小于0的时，不选择任何匹配的元素。
3.关键词(odd || even)
odd 和 even 是可用于匹配下标是奇数(odd)或偶数(even)的子元素的关键词（第一个子素的下标是 1）。
div:nth-child(2n) {
background-color: var(--red);
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
:nth-last-child(n)
:nth-last-child(n) 从某父元素的最后一个子元素开始选择特定的元素。n取值同nth-child(n)的n取值。
div:nth-last-child(2n) {
background-color: var(--red);
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
:not
:not 选择除某个元素之外的所有元素。
div {
float: left;
margin-left: 10px;
width: 100px;
height: 50px;
border: var(--border);
background-color: var(--green);
}
div:not(.item) {
background-color: var(--red);
}
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="diff"></div>
<div class="item"></div>
:not 可以配合其他选择器使用，例如：
div:not(:first-child){....}。
