我們先拋出一個問題,CSS 為什麼叫
CSS 的一切呈現結果,都是圍繞三大特性展開。
如何更深入的理解,這就需要我們瞭解 CSS 三大特性。由表象昇華到原理,從而寫出更優秀的代碼。
文中會舉出很多小例子,快來動手試試吧!
一、CSS 優先級
CSS 的組成單元是樣式規則,也就是我們常說的 CSS Rule ,正如我們下面看到的這張圖:
眾所周知,CSS 有一個核心特性:當多條樣式規則中的同一個屬性作用到了同一個元素,這些樣式之間就會發生覆蓋。
優先級高的 CSS 樣式,將覆蓋優先級低的 CSS 樣式,成為最終網頁元素的實際樣式。
所以,為了保證頁面有序並且正確的渲染,我們需要了解 CSS 優先級規則。大致的規則如下:
!important > 行內樣式 > ID 選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性
當然,上述規則可以解決我們 80% 的疑惑。關鍵的是,還需要理解以下三點:
1. CSS 屬性繼承(詳情請看下文),我們來看一個例子:
首先定義 html 結構:
為其添加樣式規則:
如上代碼,那麼到底顯示什麼顏色呢?答案就是 yellow 。
你肯定會有這樣的疑惑:ID 選擇器的優先級高於 Class 選擇器,且還有繼承,應該是 red 。
其實不然,這裡不要被誤導了,其實 box 提供的 color 對 text 來說只能繼承 color 屬性,而
2. CSS 權重計算:
CSS 權重計算其實就是統計選擇符中的不同組成元素的個數,並以 (a,b,c,d) 這種形式來判斷。
其中,abcd分別代表了不同類別的選擇符組成元素,且戰鬥力分別在不同的數量級,a最強,d最弱。
從強到弱,這4個字母分別代表的類別是:
內聯樣式(Inline style) a = 1 – (1,0,0,0);Id選擇符 b = 1 – (0,1,0,0)類選擇符 (Class),偽類選擇符(Pseudo class),屬性選擇符(Attribute) c = 1 – (0,0,1,0)3. !important 標識符;
毫無疑問,!important 會有最高的優先級,這也經常讓我們執行強制覆寫樣式。
但是需要注意,一定是
html 結構不變:
樣式規則稍作修改,我們增加 !important 規則:
明白了上述規則後,我們不難得出結論,結果依然是黃色,因為 !important 再牛,在這裡他也是 color 繼承,顯然幹不過直接作用類 text。
深入閱讀請查看:CSS 優先級詳細解析
二、CSS 繼承性
CSS 繼承性是指被包在內部的標籤將擁有外部標籤的樣式性,即子元素可以繼承父元素的屬性。
有哪些屬性是可以繼承的呢,我們簡單分一下類:
1.font-family,font-size,font-weight 等 f 開頭的 CSS 樣式;
2.text-align,text-indent 等 t 開頭的樣式;
3.color;
三、CSS 層疊性
CSS 層疊性是指 CSS 樣式在針對同一元素配置同一屬性時,依據層疊規則(權重)來處理衝突,選擇應用權重高的 CSS 選擇器所指定的屬性,一般也被描述為權重高的覆蓋權重低的,因此也稱作層疊。
每個 CSS 選擇器都會有一個權重,當兩個選擇器同時配置同一元素的同一屬性時(比如一個設置 color:red,另一個 color:black ),就會產生衝突,而解決衝突的方案就是 CSS 選擇器的權重,權重高的來覆蓋權重低的。
層疊就是瀏覽器對多個樣式來源進行疊加,最終確定結果的過程。
這就回答了我們文章開頭提出的那個問題:CSS 之所以有“層疊”的概念,是因為有多個樣式來源。
四、示例解說
為了鞏固上面的知識,我們來高搞一些容易混淆的例子,簡單的測試一下。
示例一:
樣式規則,定義如下:
結果是 green ,因為 div 和 ol 都不是直接作用於 li 元素,所以他們拼的是繼承性,根據屬性繼承的就近原則,顯然 ol 更勝一籌。
示例二:
CSS 規則如下:
猜一猜,結果是什麼?
示例三:
為其設置如下規則:
CSS 規則都作用於文本,權重第一個大於第二個大於第三個(比較標籤選擇器數量),顯示 green。
示例四:
來自:https://blog.csdn.net/k491022087/article/details/52319252
為了演示效果,我們制定如下 CSS 規則:
我們暫且不去質疑這段代碼的正確性,先來分析一下最終的呈現效果:
首先,#father #son { color: red }; 設置了 #father 後代的 #son 字體顏色為 red;其次,#father p.c2 { color: green }; 和 div.c1 p.c2 { color: yellow }; 想去作用,但 class 優先級低於 id ,所以 Jartto's blog 仍然為 red;然後,又設置了 #father { color: pink !important}; ,企圖用 !important 去強制使 pink 生效,但是這對 Jartto's blog 來說只是 CSS 繼承,根據權重規則,繼承權重低於 id ,很顯然顏色依然是 red;最後,div#father.c1 { color: blue }; 肯定權重更低了,所以依然無效,最終顏色只能是 red。這是一個
五、補充說明
好了,相信到這裡,大家對 CSS 的特性也有了深刻的認識。我們來解決一下之前拋出的疑問,再來看看這段拷貝過來的代碼:
CSS 規則如下:
本文的重點也說完了,這裡來挑一下刺,看看這段代碼的問題:
#father #son { color: red }; 兩個 id 選擇器,簡直是浪費;id 選擇器中使用 !important 這就尷尬了;div#father 這種寫法把 id 選擇器變成了一個不精準的類選擇器了;代碼可讀性很差,幾乎很難把握到重點,全是冗餘代碼;可以看到,#son { color: red }; 這樣簡單一行代碼搞定的事情,被寫的亂七八糟,漏洞百出。
所以,我們不能只寫代碼,而不知其所以然,否則很有可能產生這樣的後果,十分尷尬。
六、你可能喜歡
1.
2.
3.
4.
5.