開本系列,談談一些有趣的 CSS
題目,題目類型天馬行空,想到什么說什么,不僅為了拓寬一下解決問題的思路,更涉及一些容易忽視的 CSS 細節。
解題不考慮兼容性,題目天馬行空,想到什么說什么,如果解題中有你感覺到生僻的 CSS 屬性,趕緊去補習一下吧。
不斷更新,不斷更新,不斷更新,重要的事情說三遍。
談談一些有趣的CSS題目(二)-- 從條紋邊框的實現談盒子模型
談談一些有趣的CSS題目(三)-- 層疊順序與堆棧上下文知多少
談談一些有趣的CSS題目(四)-- 從倒影說起,談談 CSS 繼承 inherit
談談一些有趣的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 ,發到博客希望得到更多的交流。
到此本文結束,如果還有什么疑問或者建議,可以多多交流,原創文章,文筆有限,才疏學淺,文中若有不正之處,萬望告知。