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