CSS的優(yōu)先級和繼承問題

★CSS的沖突,即優(yōu)先級
CSS本身的設(shè)置可以同時(shí)應(yīng)用多個(gè)樣式在同一個(gè)元素，此時(shí)樣式之間可能出現(xiàn)沖突而達(dá)不到用戶所想要的效果。
★解決CSS沖突的優(yōu)先級規(guī)則：
● CSS層疊樣式表引入方法的優(yōu)先級：內(nèi)聯(lián)式>內(nèi)嵌式>鏈接式>導(dǎo)入式
● 在多個(gè)外部樣式中，后出現(xiàn)的樣式的優(yōu)先級高于先出現(xiàn)的樣式，也就是俗稱的覆蓋
● 在樣式中，選擇器的優(yōu)先級：ID樣式>class樣式>標(biāo)記樣式（以權(quán)重比喻：id的權(quán)重為100，class的權(quán)重為10,標(biāo)簽名的權(quán)重為1）
● 在樣式后面加一個(gè)!important，例如這樣：.abc {background:#fff !improtant;} 這個(gè)樣式的優(yōu)先級就會默認(rèn)提升到頂級，全局樣式就無法影響到它了。
?注意：!important要寫在分號的前面
優(yōu)先級：
就近原則（離代碼越近，優(yōu)先級越高）
選擇范圍越小，優(yōu)先級越高。細(xì)化CSS，通過多加父元素的選擇符一層層包住，縮小選擇范圍

★樣式繼承：
繼承是指我們設(shè)置上級(父級)的CSS樣式，上級（父級）及以下的子級（下級）都具有此屬性。一般只有文字文本具有繼承特性，如文字大小、文字加粗、文字顏色、字體等。但注意有一些css樣式是不具有繼承性的。如border:1px solid red;

demo：

<p style="color:red;">如果你不知道自己<span>想做什么該做什么</span>，那你什么都做不好。</p>

說明：(1)我設(shè)置上級(父級：p)的文字顏色為紅色，而子級(span)未設(shè)置文字顏色，但是文字具有繼承特性，所以子級文字內(nèi)容依然是紅色。
(2)假如設(shè)置父級文字顏色樣式后，其多個(gè)子級因繼承而與父級相同，若有些子級顏色不想與父級相同，這個(gè)時(shí)候只需對對應(yīng)子級設(shè)置需要顏色即可。
?注意：還有一個(gè)權(quán)值比較特殊--繼承也有權(quán)值但很低，有的文獻(xiàn)提出它只有0.1，所以可以理解為繼承的權(quán)值最低。

繼承好處：可以只設(shè)置上級的CSS樣式表屬性，子級（下級）不用設(shè)置，都有此CSS屬性，可以減少CSS代碼，便于維護(hù)。

★CSS中可以和不可以繼承的屬性
一、無繼承性的屬性

1、display：規(guī)定元素應(yīng)該生成的框的類型

2、文本屬性：

vertical-align：垂直文本對齊

text-decoration：規(guī)定添加到文本的裝飾

text-shadow：文本陰影效果

white-space：空白符的處理

unicode-bidi：設(shè)置文本的方向

3、盒子模型的屬性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景屬性：background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位屬性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成內(nèi)容屬性：content、counter-reset、counter-increment

7、輪廓樣式屬性：outline-style、outline-width、outline-color、outline

8、頁面樣式屬性：size、page-break-before、page-break-after

9、聲音樣式屬性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有繼承性的屬性

1、字體系列屬性

font：組合字體

font-family：規(guī)定元素的字體系列

font-weight：設(shè)置字體的粗細(xì)

font-size：設(shè)置字體的尺寸

font-style：定義字體的風(fēng)格

font-variant：設(shè)置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。

font-stretch：對當(dāng)前的 font-family 進(jìn)行伸縮變形。所有主流瀏覽器都不支持。

font-size-adjust：為某個(gè)元素規(guī)定一個(gè) aspect 值，這樣就可以保持首選字體的 x-height。

2、文本系列屬性

text-indent：文本縮進(jìn)

text-align：文本水平對齊

line-height：行高

word-spacing：增加或減少單詞間的空白（即字間隔）

letter-spacing：增加或減少字符間的空白（字符間距）

text-transform：控制文本大小寫

direction：規(guī)定文本的書寫方向

color：文本顏色

3、元素可見性：visibility

4、表格布局屬性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表布局屬性：list-style-type、list-style-image、list-style-position、list-style

6、生成內(nèi)容屬性：quotes

7、光標(biāo)屬性：cursor

8、頁面樣式屬性：page、page-break-inside、windows、orphans

9、聲音樣式屬性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

三、所有元素可以繼承的屬性

1、元素可見性：visibility

2、光標(biāo)屬性：cursor

四、內(nèi)聯(lián)元素可以繼承的屬性

1、字體系列屬性

2、除text-indent、text-align之外的文本系列屬性

五、塊級元素可以繼承的屬性

1、text-indent、text-align

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com