css3結構性偽類選擇器們，很好用！
摘要：
:root
作用
:bookmark:匹配元素E所在文件的根元素。在HTML文件中，根元素始終是 <html> 。
演示
css
:root {
background-color: aquamarine;
}
html
&...
:root
作用
:bookmark:匹配元素E所在文件的根元素。在HTML文件中，根元素始終是 <html> 。
演示
css
:root {
background-color: aquamarine;
}
html <body><!-- 什麼都沒寫 --></body>sfahj
效果
:not
作用
:bookmark:選擇除某個元素之外的所有元素。
演示
css
:root {
--border: 1px solid #666;
--green: lightgreen;
--coral: lightcoral;
}
div {
margin-top: 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
作用
:bookmark:選擇沒有任何內容的元素(有空格也不行)。
演示
css
div:empty {
background-color: var(--coral);
}
html <div></div> <div>1231</div> <div>abc/div> <div>*()_</div> <div>...</div> <div></div>
效果
:target
作用
:bookmark:表示一個唯一的元素（目標元素），其ID與URL的片段匹配
演示
css
:target {
background-color: var(--coral);
}
html <a href="#first">click！</a> <div id="first">The first wrap</div>
效果
:first-child
作用
:bookmark:選擇元素中的第一個 子元素 。
演示
css
div:first-child {
background-color: var(--coral);
}
html <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
效果
:last-child
作用
:bookmark:選擇元素的最後一個子元素。
演示
css
div:last-child {
background-color: var(--coral);
}
html <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
效果
:nth-child(n)
作用
:bookmark:定位某個父元素的一個或多個特定的子元素。
其中“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)
作用
:bookmark:從某父元素的最後一個子元素開始選擇特定的元素。
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>
效果
完______