老調重彈的CSS優先順序

2022-09-25 13:09:07 字數 2339 閱讀 3564

首先,我們對css作乙個簡單的說明:css是層疊樣式表(cascading style shee程式設計客棧ts)的簡稱。它的規範代表了網際網路歷史上乙個獨特的發展階段。現在對於從事網頁製作的朋友來說,應該很少沒有聽說過css了,因為在製作網頁過程中我們經常需要用到。

其次:我們能通過css為文件設定豐富且易於修改的外觀,以減輕網頁製作者的工作負擔,從而減輕製作及後期維護的代價。

其實現在還來講css是什麼,css有什麼作用完全是多餘的,相信從事網頁製作的朋友都已經或多或少的接觸過了。

言歸正傳,我們開始進入今天的話題:

一、什麼是css優先順序?

所謂css優先順序,即是指css樣式在瀏覽器中被解析的先後順序。

二、css優先順序規則

既然樣式有優先順序,那麼就會有乙個規則來約定這個優先順序,而這個「規則」就是本次所需要講的重點。

樣式表中的特殊性描述了不同規則的相對權重,它的基本規則是:

1. 統計選擇符中的id屬性個數。

2. 統計選擇符中的class屬性個數。

3. 統計選擇符中的html標記名個數。

最後,按正確的順序寫出三個數字,不要加空格或逗號,得到乙個三位數(css2.1是用4位數表示)。( 注意,你需要把數字轉換成乙個以三個數字結尾的更大的數)。相應於選擇符的最終數字列表可以很容易確定較高數字特性凌駕於較低數字的。

例如:

1. 每個id選擇符(#someid),加 0,1,0,0。

2. 每個class選擇符(.someclass)、每個屬性選擇符(形如[attr=value]等)、每個偽類(形如:hover等)加0,0,1,0。

3. 每個元素或偽元素(:firstchild)等,加0,0,0,1。

4. 其它選擇符包括全域性選擇符*,加0,0,0,0。相當於沒加,不過這也是一種specificity,後面會解釋。

三、特性分類的選擇符列表

以下是乙個按特性分類的選擇符的列表:

選擇符特性值

h1 1

p em 

2.apple 

10p.bright 

11p.bright em.dark 

22#id316 

100單從上面這個表來看,貌似不大好理解,下面再給出一張表:

選擇符特性值

h1 1

p em 

1+1=2

.apple

10p.bright

1+10=11

p.bright em.dark

1+10+1+10=22

#id316

100通過上面,就可以很簡單的看出,html標程式設計客棧記的權重是1,class的權重是10,id的權重是100,繼承的權重為0(後面會講到)。

按這些規則將數字串逐位相加,就得到最終的權重,然後在比較取捨時按照從左到右的順序逐位比較。

優先順序iwighs問題其實就是乙個衝突解決的問題,當同乙個元素(內容)被css選擇符選中時,就要按照優先順序取捨不同的css規則,這其中涉及到的問題其實很多。

說到這裡,我們不得不說一下css的繼承性。

四、css的繼承性

4.1 繼承的表現

繼承是css的乙個主要特徵,它是依賴於祖先-後代的關係的。繼承是一種機制,它允許樣式不僅可以應用於某個特定的元素,還可以應用於它的後代。例如乙個body定義了的顏色值也會應用到段落的文字中。

樣式定義:body

舉例**:

css繼承性的測試

舉例效果:

這段**的應用結果是:「css繼承性的測試」這段話是紅顏色的,「繼承性」幾個字由於應用了標籤,所以是粗體。很顯然,這段文字都繼承了由body 樣式定義的顏色。這也就是為什麼說繼承性是css的一部分。

然而css繼承性的權重是非常低的,是比普通元素的權重還要低的0。

我們仍以上面的舉例**為例:在樣式定義中新增一條:strong 。

舉例效果:

發現只需要給加個顏色值就能覆蓋掉它繼承自的樣式顏色。由此可見:任何顯示申明的規則都可以覆蓋其繼承樣式。

4.2 繼承的侷限性

繼承是css重要的一部分,我們甚至不用去考慮它為什麼能夠這樣,但css繼承也是有限制的。

有一些屬性不能被繼承,如:border, margin, padding, background等。

樣式定義:div

舉例**:

我是border我是不能被繼承滴

預期效果:

實際效果:

從上面的效果中,我們可以看出,border是不能被繼承的,還有一些其它的屬性也是如此,這裡就不一一枚舉。

五、附加說明

1. 文內的樣式優先順序為1,0,0,0,所以始終高於外部定義。這裡文內樣式指形如

blah

的樣式,而外部定義指經由或

老調重彈之整除與實數除

學計算機的同學一定被人問到這樣的問題 1.5除以2等於多少?很多人第一反應就是暴怒,這麼簡單的問題居然還拿來考我,真是豈有此理。小學生都會的啊,等於2.5嘛 等等,好像事情沒有那麼簡單吧?如果這麼簡單的話,為什麼還要拿來問呢?我們來看一下到底等於多少?看到了嗎?它的結果是等於2.太不可思議了吧。但其...

老調重彈之整除與實數除

學計算機的同學一定被人問到這樣的問題 1.5除以2等於多少?很多人第一反應就是暴怒,這麼簡單的問題居然還拿來考我,真是豈有此理。小學生都會的啊,等於2.5嘛 等等,好像事情沒有那麼簡單吧?如果這麼簡單的話,為什麼還要拿來問呢?我們來看一下到底等於多少?看到了嗎?它的結果是等於2.太不可思議了吧。但其...

老調重彈 access注入過主機衛

首先開啟伺服器上安裝了主機衛士的 嘗試在變數id的值後面插入萬惡的單引號,根據報錯,我們可以分析出來,使用的是access資料庫。通過order by檢視當前表有多少個列,發現6的時候報錯,5的時候正常,表明當前表中有5個列 接著試試聯合查詢 duang的一下,就被攔截了 嗚嗚嗚 那只能操出萬能的黑...