CSS規則重要性以及繼承 層疊

2022-08-27 12:45:09 字數 1381 閱讀 1883

多個規則中只有乙個勝出,那麼怎麼知道哪乙個規則更強呢?答案在於每個選擇器的特殊性。對於每個規則,使用者**會計算選擇器的特殊性,並將這個特殊性附加到規則中的各個宣告。如果乙個元素有兩個或者多個衝突的屬性宣告,那麼有最高特殊性的宣告就會勝出。(這並不是解決衝突的全部。實際上,所有樣式衝突的解決都由層疊來處理)。

選擇器的特殊性由選擇器本身的元件確定。特殊性值表述為4個部分,如:0,0,0,0.乙個選擇器的具體特殊性如下確定:

對於選擇其中給定的各個id屬性值,加0,1,0,0。對於選擇其中給定的各個類屬性值、屬性選擇或偽類,加0,0,1,0。偽元素特殊性為0,0,0,1。結合符和通配選擇器對特殊性沒有任何貢獻。

一般地,第乙個0是位內聯樣式宣告保留的,它比所有其他宣告的特殊性都高。

重要性,有時某個宣告可能非常重要,超過了所有其他宣告。在這些宣告的結束分號之前插入!important來標誌、!important總是放在宣告的最後,即分號前面。如果乙個屬性的值可以包含多個關鍵字,這一點則尤為重要,必須將!important標誌放在宣告的最後。

實際上,所有!important宣告會分組在一起,重要宣告的特殊性衝突會再重要宣告內部解決,而不會與非重要宣告相混。類似地,我們認為所有非重要宣告也歸為一組,使用特殊性來解決衝突。如果乙個重要宣告和乙個非重要宣告衝突,勝出的總是重要宣告。

在html中,對於向上傳播規則有乙個例外:應用到body元素的背景樣式可以傳遞到html元素(html是文件的根元素),相應地可以定義其畫布。

繼承是css中最基本的內容之一,除非有必要的理由,否則一般不會特別考慮,正所謂熟視無睹。不過有幾點需要記住。

首先,注意有些屬性不能繼承,這往往歸因於乙個簡單的常識。例如,屬性border就不會繼承。一般地,大多數框模型都不能繼承,其原因是一樣的。繼承的值根本沒有特殊性,設定連0特殊性都沒有。這看上去似乎只是理論上不同,不過等你了解到繼承值沒有特殊性會有什麼結果時,就會知道這種差別絕不能忽視。

因為通配選擇器適用於所有元素,而且有0特殊性,其顏色宣告指定的值gray要優先於繼承值,因為繼承值根本沒有特殊性。

由於它能匹配任何元素,所以通配選擇器往往有一種短路繼承的效果。這個問題可以解決,不過通常更合理的做法是從一開始就避免不加區別地使用通配選擇器,從而從根本上避免這個問題。

如果特殊性相等的兩個規則同時應用到同乙個元素會怎麼樣呢。瀏覽器如何解決這個衝突。h1 h1這兩個規則的特殊性都是0,0,0,1。所以它們的權重相等,都應當應用到元素。但這是不可能的。

正是由於這種按順序排序,所以才有了通常推薦的鏈結樣式順序。一般建議按link-visited-focus-hover-active。這些選擇器的特殊性都是一樣的0,0,1,0。因為它們都有同樣地權重、**和特殊性,因此與元素匹配的最後乙個選擇器才會勝出。正在點選的未訪問鏈結可以與其中三個規則匹配:link,hover和active所以在這三個規則當中最後宣告的而乙個將勝出。

CSS的繼承 特殊性 層疊 重要性

css的某些樣式是具有繼承性的,那麼什麼是繼承呢?繼承是一種規則,它允許樣式不僅應用於某個特定html標籤元素,而且應用於其後代。比如下面 如某種顏色應用於p標籤,這個顏色設定不僅應用p標籤,還應用於p標籤中的所有子元素文字,這裡子元素為span標籤。p 我是乙個喜歡程式設計的小女孩。可見結果視窗中...

css的繼承 層疊 特殊和重要性

應用場景 比如 p p 中包含 span span 應用在 p 之中的 也會影響到 span 中樣式 但也不是所有語句都會,比如 一些邊框的樣式 許多 作用於一種標籤,從網頁顯示也只能是一種,權值最高的,就使用哪一種 標籤權值為1 類選擇器權值為10 id選擇符權值為100 p 權值為1 pspan...

CSS的繼承 層疊 特殊性和重要性

學習目標 認識 css 的一些特性 繼承 層疊 特殊性和重要性 繼承是一種規則,它允許樣式不僅應用於某個特定 html 標籤元素,而且應用於某後代。如下所示 p 三年級時,我還是乙個膽小如鼠span 的小女孩。p 上面 的效果是 p 中的文字與 span 中的文字都設定了紅色。但需要注意的是,有些 ...