談談一些有趣的CSS題目（十）-- 結構性僞類選擇器

開本系列，談談一些有趣的 <code>CSS</code> 題目，題目類型天馬行空，想到什麼說什麼，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。

解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。

不斷更新，不斷更新，不斷更新，重要的事情說三遍。

<a href="http://www.cnblogs.com/coco1s/p/5893921.html">談談一些有趣的CSS題目（一）-- 左邊豎條的實作方法</a>

<a href="http://www.cnblogs.com/coco1s/p/5895764.html">談談一些有趣的CSS題目（二）-- 從條紋邊框的實作談盒子模型</a>

<a href="http://www.cnblogs.com/coco1s/p/5899089.html">談談一些有趣的CSS題目（三）-- 層疊順序與堆棧上下文知多少</a>

<a href="http://www.cnblogs.com/coco1s/p/5908120.html">談談一些有趣的CSS題目（四）-- 從倒影說起，談談 CSS 繼承 inherit</a>

<a href="http://www.cnblogs.com/coco1s/p/5911946.html">談談一些有趣的CSS題目（五）-- 單行居中，兩行居左，超過兩行省略</a>

<a href="http://www.cnblogs.com/coco1s/p/5915429.html" target="_blank">談談一些有趣的CSS題目（六）-- 全相容的多列均勻布局問題</a>

<a href="http://www.cnblogs.com/coco1s/p/5948383.html" target="_blank">談談一些有趣的CSS題目（七）-- 消失的邊界線問題</a>

<a href="http://www.cnblogs.com/coco1s/p/5955631.html" target="_blank">談談一些有趣的CSS題目（八）-- 純CSS的導航欄Tab切換方案</a>

<a href="http://www.cnblogs.com/coco1s/p/6026009.html">談談一些有趣的CSS題目（九）-- 巧妙的實作 CSS 斜線</a>

每一個 CSS 僞類及僞元素的出現，肯定都是為了解決某些先前難以解決的問題而應運而生的。

學習了解它們，是解決許多其他複雜 CSS 問題或者前沿技術的基礎。

這裡是 4 個基本的結構性僞類選擇器，結構性僞類選擇器的共同特征是允許開發者根據文檔樹中的結構來指定元素的樣式。

<code>:root</code> 僞類比對文檔樹的根元素。應用到HTML，<code>:root</code> 即表示為<code>&lt;html&gt;</code>元素，除了優先級更高外，相當于html标簽選擇器。

1

<code>:root { 樣式屬性 }</code>

譬如，<code>:root{background:#000}</code> ，即可将頁面背景色設定為黑色。

由于屬于 CSS3 新增的僞類，是以也可以作為一種 HACK 元素，隻對 IE9+ 生效。

介紹 <code>:root</code> 僞類，是因為在介紹使用 <code>CSS變量</code> 的時候，聲明全局CSS變量時 <code>:root</code> 很有用。

<code>:empty</code> 僞類，代表沒有子元素的元素。 這裡說的子元素，隻計算元素結點及文本（包括空格），注釋、運作指令不考慮在内。

考慮一個例子：

2

3

4

5

6

7

<code>div{</code>

<code>  </code><code>height</code><code>:</code><code>20px</code><code>;</code>

<code>  </code><code>background</code><code>:</code><code>#ffcc00</code><code>;</code>

<code>}</code>

<code>div:empty{</code>

<code>  </code><code>display</code><code>:</code><code>none</code><code>;</code>

<code>&lt;</code><code>div</code><code>&gt;1&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;</code><code>div</code><code>&gt; &lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;</code><code>div</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

上述的例子，前兩個div會正常顯示，而第三個則會 <code>display:none</code> 隐藏。

也就是說，要想 <code>:empty</code> 生效，标簽中連哪怕一個空格都不允許存在。

CSS否定僞類，<code>:not(X)</code>，可以選擇除某個元素之外的所有元素。

X不能包含另外一個否定選擇器。

關于 <code>:not</code> 僞類有幾個有趣的現象：

<code>:not</code> 僞類不像其它僞類，它不會增加選擇器的優先級。它的優先級即為它參數選擇器的優先級。

我們知道，選擇器是有優先級之分的，通常而言，僞類選擇的權重與類選擇器（class selectors，例如<code>.example</code>），屬性選擇器（attributes selectors，例如 <code>[type="radio"]</code>）的權重相同，但是有一個特例，就是 <code>:not()</code>。<code>:not</code> 否定僞類在優先級計算中不會被看作是僞類，但是在計算選擇器數量時還是會把其中的選擇器當做普通選擇器進行計數。

使用 <code>:not(*)</code> 将比對任何非元素的元素，是以這個規則将永遠不會被應用。

<code>:target</code> 代表一個特殊的元素，若是談論差別的話，它需要一個id去比對文檔URI的片段辨別符。

<code>:target</code> 選擇器的出現，讓 CSS 也能夠接受到使用者的點選事件，并進行回報。（另一個可以接收點選事件的 CSS 選擇器是 <code>:checked</code>）。

到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

本文轉自ChokCoco部落格園部落格，原文連結：http://www.cnblogs.com/coco1s/p/6067305.html