谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器
開本系列，談?wù)勔恍┯腥さ?CSS?題目，題目類型天馬行空，想到什么說什么，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細(xì)節(jié)。
解題不考慮兼容性，題目天馬行空，想到什么說什么，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補(bǔ)習(xí)一下吧。
不斷更新，不斷更新，不斷更新，重要的事情說三遍。
談?wù)勔恍┯腥さ腃SS題目（一）-- 左邊豎條的實(shí)現(xiàn)方法
談?wù)勔恍┯腥さ腃SS題目（二）-- 從條紋邊框的實(shí)現(xiàn)談盒子模型
談?wù)勔恍┯腥さ腃SS題目（三）-- 層疊順序與堆棧上下文知多少
談?wù)勔恍┯腥さ腃SS題目（四）-- 從倒影說起，談?wù)?CSS 繼承 inherit
談?wù)勔恍┯腥さ腃SS題目（五）-- 單行居中，兩行居左，超過兩行省略
談?wù)勔恍┯腥さ腃SS題目（六）-- 全兼容的多列均勻布局問題
談?wù)勔恍┯腥さ腃SS題目（七）-- 消失的邊界線問題
談?wù)勔恍┯腥さ腃SS題目（八）-- 純CSS的導(dǎo)航欄Tab切換方案
談?wù)勔恍┯腥さ腃SS題目（九）-- 巧妙的實(shí)現(xiàn) CSS 斜線
所有題目匯總在我的?Github?。
?
十、結(jié)構(gòu)性偽類選擇器（:root,:target,:empty,:not）
每一個(gè) CSS 偽類及偽元素的出現(xiàn)，肯定都是為了解決某些先前難以解決的問題而應(yīng)運(yùn)而生的。
學(xué)習(xí)了解它們，是解決許多其他復(fù)雜 CSS 問題或者前沿技術(shù)的基礎(chǔ)。
這里是 4 個(gè)基本的結(jié)構(gòu)性偽類選擇器，結(jié)構(gòu)性偽類選擇器的共同特征是允許開發(fā)者根據(jù)文檔樹中的結(jié)構(gòu)來指定元素的樣式。
?
:root?偽類
:root?偽類匹配文檔樹的根元素。應(yīng)用到HTML，:root?即表示為<html>元素，除了優(yōu)先級(jí)更高外，相當(dāng)于html標(biāo)簽選擇器。
語(yǔ)法樣式
:root { 樣式屬性 }譬如，:root{background:#000}?，即可將頁(yè)面背景色設(shè)置為黑色。
由于屬于 CSS3 新增的偽類，所以也可以作為一種 HACK 元素，只對(duì) IE9+ 生效。
介紹?:root?偽類，是因?yàn)樵诮榻B使用?CSS變量?的時(shí)候，聲明全局CSS變量時(shí)?:root?很有用。
?
:empty?偽類
:empty?偽類，代表沒有子元素的元素。 這里說的子元素，只計(jì)算元素結(jié)點(diǎn)及文本（包括空格），注釋、運(yùn)行指令不考慮在內(nèi)。
考慮一個(gè)例子：
div{height:20px;background:#ffcc00; } div:empty{display:none; } <div>1</div> <div> </div> <div></div>上述的例子，前兩個(gè)div會(huì)正常顯示，而第三個(gè)則會(huì)?display:none?隱藏。
也就是說，要想?:empty?生效，標(biāo)簽中連哪怕一個(gè)空格都不允許存在。
[Demo戳我：:empty結(jié)構(gòu)性偽類示例]
?
:not?偽類
CSS否定偽類，:not(X)，可以選擇除某個(gè)元素之外的所有元素。
X不能包含另外一個(gè)否定選擇器。
關(guān)于?:not?偽類有幾個(gè)有趣的現(xiàn)象：
- :not?偽類不像其它偽類，它不會(huì)增加選擇器的優(yōu)先級(jí)。它的優(yōu)先級(jí)即為它參數(shù)選擇器的優(yōu)先級(jí)。
我們知道，選擇器是有優(yōu)先級(jí)之分的，通常而言，偽類選擇的權(quán)重與類選擇器（class selectors，例如.example），屬性選擇器（attributes selectors，例如?[type="radio"]）的權(quán)重相同，但是有一個(gè)特例，就是?:not()。:not?否定偽類在優(yōu)先級(jí)計(jì)算中不會(huì)被看作是偽類，但是在計(jì)算選擇器數(shù)量時(shí)還是會(huì)把其中的選擇器當(dāng)做普通選擇器進(jìn)行計(jì)數(shù)。
-
使用?:not(*)?將匹配任何非元素的元素，因此這個(gè)規(guī)則將永遠(yuǎn)不會(huì)被應(yīng)用。
-
這個(gè)選擇器只會(huì)應(yīng)用在一個(gè)元素上， 你不能用它在排除所有祖先元素。 舉例來說， body :not(table) a 將依舊會(huì)應(yīng)用在table內(nèi)部的<a>?上, 因?yàn)?<tr>將會(huì)被:not() 這部分選擇器匹配。（摘自MDN）
?
:target?偽類
:target?偽類，在?#8、純CSS的導(dǎo)航欄Tab切換方案?中已經(jīng)實(shí)踐過了，可以回過頭看看。
:target?代表一個(gè)特殊的元素，若是談?wù)搮^(qū)別的話，它需要一個(gè)id去匹配文檔URI的片段標(biāo)識(shí)符。
:target?選擇器的出現(xiàn)，讓 CSS 也能夠接受到用戶的點(diǎn)擊事件，并進(jìn)行反饋。（另一個(gè)可以接收點(diǎn)擊事件的 CSS 選擇器是?:checked）。
?
所有題目匯總在我的?Github?，發(fā)到博客希望得到更多的交流。
到此本文結(jié)束，如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬(wàn)望告知。
總結(jié)
以上是生活随笔為你收集整理的谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 修改httpd默认端口号
- 下一篇： CSS reset 标签初始化设置