:root
作用
?匹配元素所在文档的根元素。在HTML文档中,根元素始终是<html>
。
演示
css
:root {
background-color: aquamarine;
}
html
<body><!-- 什么都没写 --></body>
效果
: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>
效果
:first-child
作用
?选择元素中的第一个子元素。
演示
css
div:first-child {
background-color: var(--coral);
}
html
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
效果
:last-child
作用
?选择元素的最后一个子元素。
演示
css
div:last-child {
background-color: var(--coral);
}
html
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
效果
:nth-child(n)
作用
?定位某个父元素的一个或多个特定的子元素。
其中“n”是其参数。
n取值如下:
整数值(1 || 2 || 3 || 4 || ...)
参数n的起始值为1,不是0,若要选中第一个元素
nth-child(1)
。表达式(2n+1 || -n+5 || ...)
为表达式时,n从0开始,表达式的值为0或小于0的时,不选择任何匹配的元素
关键词(odd || even)
odd 和 even 是可用于匹配下标是奇数(odd)或偶数(even)的子元素的关键词(第一个子元素的下标是 1)。
演示
css
div:nth-child(2n) {
background-color: var(--coral);
}
html
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
效果
:nth-last-child(n)
作用
?从某父元素的最后一个子元素开始选择特定的元素。
n取值同nth-child(n)的n取值
演示
css
div:nth-last-child(2n) {
background-color: var(--coral);
}
html
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
效果
***
完~