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

長征2號發表於2017-12-31
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標籤選擇器。

語法樣式

1
:root { 樣式屬性 }

譬如，:root{background:#000} ，即可將頁面背景色設定為黑色。

由於屬於 CSS3 新增的偽類，所以也可以作為一種 HACK 元素，只對 IE9+ 生效。

介紹 :root 偽類，是因為在介紹使用 CSS變數 的時候，宣告全域性CSS變數時 :root 很有用。

 

:empty 偽類

:empty 偽類，代表沒有子元素的元素。 這裡說的子元素，只計算元素結點及文字（包括空格），註釋、執行指令不考慮在內。

考慮一個例子：

1
2
3
4
5
6
7
div{
  height:20px;
  background:#ffcc00;
}
div:empty{
  display:none;
}
1
2
3
<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 ，發到部落格希望得到更多的交流。

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


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


相關文章