css衝突時的運用規則

2021-08-30 05:57:00 字數 1012 閱讀 9388

css樣式中繼承的規則大體如下:

1. 影響頁面中元素的位置的屬性,或者像margin,background color,border這些屬性是不繼承的。

2. 瀏覽器自定義的一些元素的樣式,如link為藍色的,headline的字型等等。

3. 當css樣式衝突時,繼承的不會被採用。

這裡再討論下one tag, many styles的情況,比如:對於乙個元素我們既設定了id selector style又設定了class selector style,這種情況下,如style不存在衝突,所設定的樣式會組合起來運用到元素上。如存在衝突,css提供了乙個公式去模擬優先順序:

例如:selector                          id      class     tag      total

p                                      0       0            1         1

.byline                             0       1            0         10

p.byline                           0       1            1         11

#banner                         1        0            0         100

所以在使用css時,盡量少使用複雜的繼承關係。如果優先順序還是一樣,如:p.byline a 和 p a.email 這時就看他們的位置了,位置下的就贏,上面的樣式最終會得到blue,如調換位置則是red。同樣html引用外部style檔案也同樣運用該規則。如果想打破該規則可使用!important關鍵字,如:a,但是不要依賴它,因為ie6下可能存在無法解析的問題。

解決這種css樣式最好的方法是採用選擇性覆蓋,就是先定義乙個通用的css檔案,而對某些特定的頁面在定義乙個css檔案覆蓋需要改變的樣式,在引用時將特定的css檔案放在後面:

css屬性值的層疊衝突規則

層疊衝突 同乙個樣式,多次用到同乙個元素,就會發生層疊衝突,需要對樣式表有衝突的申明使用層疊規則,確定css屬性值 color 000000 important 總體規則 選擇器選中的範圍越窄,越特殊 具體規則 通過選擇器,計算出乙個4位數 數值越大,屬性值的優先順序越高 千位 若果是內聯樣式,記1...

如何處理有衝突的CSS規則

如果同個元素有兩個或以上衝突的css規則,瀏覽器有一些基本的規則來決定哪乙個非常特殊而勝出。它可能不像其它那麼重要,大部分案例你不需要擔心衝突,但大型而且複雜的css檔案,或有很多css檔案組成的,可能產生衝突。選擇器一樣的情況下後面的會覆蓋前面的屬性。比如 p p p元素的元素將是藍色,因為遵循後...

CSS的衝突與解決

當多個css樣式應用到同乙個元素時,這些樣式之間可能存在對同乙個屬性的不同格式設定,當發生衝突時,瀏覽器通過遵循以下原則來解決css衝突。優先順序原則最近原則同一屬性的樣式定義,後面定義的樣式會覆蓋前面定義的樣式。優先順序原則 指的是優先順序最高的樣式有效,其中行內樣式 內嵌式樣式 鏈結外部樣式,即...