CSS優先順序的相關知識詳細介紹

2022-09-22 01:24:07 字數 1990 閱讀 9814

在講css優先順序之前,uwrgwvtu我們得要了解什麼是css,css是用來做什麼的。簡單說來,css是層疊樣式表(cascading style sheets)的簡稱。它的規範代表了網際網路歷史上乙個獨特的發展階段。現在對於從事網頁製作的朋友來說,應該很少沒有聽說過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,後面會解釋。

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

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

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

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

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

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

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

四、css的繼承性

4.1 繼承的表現

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

樣式定義:

舉例**:

舉例效果:

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

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

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

舉例效果:uwrgwvtu

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

4.2 繼承的侷限性

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

有一些屬程式設計客棧性不能被繼承,如:border, mar程式設計客棧gin, padding, background等。

樣式定義:

舉例**:

預期效果:

實際效果:

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

五、附加說明

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

blah

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

CSS選擇器的優先順序的相關介紹

css選擇器的優先順序 使用不同的選擇器,選中同乙個元素並且設樣式的時候,這樣樣式就會產生衝突,最終到底採用哪乙個選擇器定義的樣式,由選擇器的優先順序 權重 決定,優先順序高的優先顯示 優先順序規則 權重值 當選擇器中包含多種選擇器的時候,需要將我們的選擇器的優先順序加在一起進行計算比較,但是注意,...

css 優先順序

當我們的css樣式中,如果同個元素有兩個或以上衝突的css規則,瀏覽器有一些基本的規則來決定哪乙個非常特殊而勝出,也就是常講的css優先順序。一般情況下,你不必擔心css樣式衝突,但對於大型而且複雜的css樣式檔案,或有很多css檔案組成的,就非常有可能產生衝突。下面我們通過2個簡單的例項來了解一下...

css優先順序

今天在使用公司內部框架的時候,發現乙個問題。我在頁面的style元素裡面寫了乙個class選擇器,可是卻不起作用。使用f12檢視,發現是當前的樣式沒有起作用,而是被框架生成的樣式代替掉了。當然,寫內嵌的樣式肯定是沒問題。可問題就是,我明明在頁面內部寫了樣式,按照常理,應該是我手寫的類選擇器的優先順序...