1. 程式人生 > 實用技巧 >部落格中css樣式的正確設定

部落格中css樣式的正確設定

一、簡介

部落格園的文章是支援html程式碼和css樣式的,即使是markdown寫作。當某個標籤需要特製樣式時,我們可以自定義樣式來覆蓋掉原本的樣式。

二、css樣式優先順序

參考至>>菜鳥教程<<
其中最重要的有兩點。

內聯樣式 > ID 選擇器(#) > 類選擇器( . ) = 屬性選擇器 = 偽類選擇器 > 標籤選擇器 = 偽元素選擇器
還有
內聯樣式 > 內部樣式 > 外部樣式

內聯樣式即寫在標籤中的style屬性;內部樣式即寫在html檔案其它位置的<style>標籤;外部樣式即<link>標籤遠端載入的樣式。相同優先順序有衝突的話,靠後的生效。
但是很容易發現即使是內聯樣式,也不生效的情況,那是因為

當一個標籤同時被多個選擇符選中,我們便需要確定這些選擇符的優先順序。我們有如下規則:
計算選擇符中 ID 選擇器的個數(a),計算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個數之和(b),計算選擇符中標籤選擇器和偽元素選擇器的個數之和(c)。按 a、b、c 的順序依次比較大小,大的則優先順序高,相等則比較下一個。若最後兩個的選擇符中 a、b、c 都相等,則按照"就近原則"來判斷。

樣式前面的選擇器多的優先順序高
一般來說我們自己的標籤寫一個id,用上父級標籤的id和自己的id就有足夠高的優先順序了

#topics #no-box-shadow-img{
	box-shadow:none;
}

ヽ( ⌒ω⌒)人(== )ノ