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

時間 2019-11-19

標籤談談一些有趣 css 題目結構性選擇器欄目 CSS 简体版

原文原文鏈接

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

解題不考慮兼容性，題目天馬行空，想到什麼說什麼，若是解題中有你感受到生僻的 CSS 屬性，趕忙去補習一下吧。html

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

談談一些有趣的CSS題目（一）-- 左邊豎條的實現方法github

談談一些有趣的CSS題目（二）-- 從條紋邊框的實現談盒子模型佈局

談談一些有趣的CSS題目（三）-- 層疊順序與堆棧上下文知多少post

談談一些有趣的CSS題目（四）-- 從倒影提及，談談 CSS 繼承 inherit學習

談談一些有趣的CSS題目（五）-- 單行居中，兩行居左，超過兩行省略url

談談一些有趣的CSS題目（六）-- 全兼容的多列均勻佈局問題spa

談談一些有趣的CSS題目（七）-- 消失的邊界線問題code

談談一些有趣的CSS題目（八）-- 純CSS的導航欄Tab切換方案

談談一些有趣的CSS題目（九）-- 巧妙的實現 CSS 斜線

全部題目彙總在個人 Github 。

10、結構性僞類選擇器（`: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）