CSS樣式表層疊(cascade)處理衝突

2022-10-05 03:03:09 字數 1432 閱讀 7831

原文連線:

即使在不太複雜的樣式表中,也可能會有兩個或者更多個規則找到同一元素。css通過乙個叫做層疊(cascade)的過程處理這種衝突。層疊給每個規則分配乙個重要程度指數。作者定義的樣式具有最高的重要性指數,其次是podjx使用者定義的樣式。但是為了增強使用者的控制能力,使用者可以通過為任何規則增加乙個!important來提高它的重要性指數,讓它的優先順序高於任何規則,甚至是比作者的!important還要高。

因此,層疊重要性指數的次序依次為:

標記為!important的使用者樣程式設計客棧式

標記為!important的作者樣式

作者樣式

使用者樣式

瀏覽器/使用者**的預設樣式

為了計算規則的優先順序,每種型別的選擇符都有乙個相應的數值,由於每個選擇器都由若干選擇符組成,所以選擇器的優先指數由選擇符對應的數值相加而成,數值越高,優先順序越高。css中的選擇符有四類:

行內樣式(inline style),如...

id選擇符(id selectors),如#myid

類、屬性選擇符、偽類(classes, attributes and pseudo-classes),如 .class 、[href$=dudo.org]、:hover

元素(elements)、偽元素選擇符(pseudo-elements),如 p 、:first-line

怎麼來測量呢?如前所述,它們每一類都有不同的數值表示,其中:

行內樣式為:1000

id選擇符為:0100

類選擇符為:0010

元素樣式為:0001

這裡要指出的是,所有這些數值都不是10進製數字,1000只是**它是乙個行內樣式,

例如,body #wrap p ,那麼它的優先順序指數就是 1 100 1=102,而body div#wrap p 的優先順序指數就是 1 1 100 1 =103。

再看一下其它的例子:

* 0

li:first-line 2 (one element, one pseudo-element)

ul ol li 3 (three elements)

ul ol li.red 13 (one class, three elements)

style=」」 1000 (one inlinwww.cppcns.come styling)

div p 2 (two html selectors)

div p.sith 12 (two html selectors and a class selector)

body #darkside .sith p 112 (html selector, id selector, class selector, html selector; 1 100 10 1)

看這段**:

本文標題: css樣式表層疊(cascade)處理衝突

本文位址:

CSS樣式表層疊(cascade)處理衝突

原文連線 即使在不太複雜的樣式表中,也可能會有兩個或者更多個規則找到同一元素。css通過乙個叫做層疊 cascade 的過程處理這種衝突。層疊給每個規則分配乙個重要程度指數。作者定義的樣式具有最高的重要性指數,其次是使用者定義的樣式。但是為了增強使用者的控制能力,使用者可以通過為任何規則增加乙個 i...

CSS層疊樣式表

一般說來所有樣式有下面的規則 第四個最有優先性 1 browser default 瀏覽器預設 2 external style sheet 外部樣式表 3 internal style sheet inside the 瀏覽器將從mystyle.css檔案中讀採樣式定義資訊,並根據它來格式化文件 ...

CSS(層疊樣式表)

一.css是增加html的樣式,擁有對網頁物件和模型樣式編輯的能力 1 在html中引入css有3種方式 1.外部樣式表 2.內部樣式表 3.內聯樣式表 2 css選擇元素的方式 1.元素選擇器 通過元素名字進行選擇 2.id選擇器 3.class選擇器 4.子元素選擇器 5.相鄰選擇器 如果需要選...