CSS偽類
狀態(tài)是動態(tài)變化的,當(dāng)一個元素達(dá)到一個特定狀態(tài)時,它可能得到一個樣式,當(dāng)狀態(tài)改變時,又失去這個樣式。
它的功能和class有些類似,但它是基于文檔之外的抽象,所以叫偽類
:link
偽類將應(yīng)用于未被訪問過的鏈接。IE6不兼容,解決此問題,直接使用a標(biāo)簽。
:hover
偽類將應(yīng)用于有鼠標(biāo)指針懸停于其上的元素。在IE6只能應(yīng)用于a連接,IE7+所有元素都兼容。
:active
偽類將應(yīng)用于被激活的元素,如被點擊的鏈接、被按下的按鈕等。
:visited
偽類將應(yīng)用于已經(jīng)被訪問過的鏈接
:focus
偽類將應(yīng)用于擁有鍵盤輸入焦點的元素。
順序問題:LoVe? HAte原則。
注意:順序一定是Link-Visited-Hover-Active
CSS偽元素
偽元素 是控制內(nèi)容
:first-line 偽元素
:first-letter 偽元素
注釋:以上兩個偽元素只能用于塊級元素
:first-child 偽元素,選擇屬于第一個子元素的元素。
偽類是狀態(tài),偽元素是內(nèi)容
例如:span:first-child{}? /*選擇屬于第一個子元素的所有span標(biāo)簽。*/
:before與:after偽元素,是行內(nèi)元素.可以設(shè)置元素之前后之后的 內(nèi)容,并且配合content設(shè)置相關(guān)內(nèi)容。比如:? #demo:after,#demo:before {? content:"--";display:block; }
注意:content屬性只能跟 偽元素:before 和:after共用。
Display:block. 是設(shè)置標(biāo)簽為塊級元素,獨占行。
CSS的層疊性和繼承性
CSS的層疊性,所謂層疊性是指多種CSS樣式的疊加,也就是說后來設(shè)置的樣式會層疊(覆蓋)之前的樣式,層疊性的前提示CSS的選擇器的優(yōu)先級相同。
CSS的繼承性
CSS的繼承性是指,子容器的樣式會繼承父容器的樣式。但并不是所有的樣式都能繼承。
只有部分樣式能繼承,比如:文字相關(guān)字體大小、顏色、字體樣式、行高、鼠標(biāo)樣式等。
恰當(dāng)?shù)厥褂美^承可以簡化代碼,降低CSS樣式的復(fù)雜性。但是,如果在網(wǎng)頁中所有的元素都大量繼承樣式,那么判斷樣式的來源就會很困難,所以對于字體、文本屬性等網(wǎng)頁中通用的樣式可以使用繼承。例如,字體、字號、顏色、行距等可以在body元素中統(tǒng)一設(shè)置,然后通過繼承影響文檔中所有文本。
并不是所有的CSS屬性都可以繼承,例如,下面的屬性就不具有繼承性:邊框、外邊距、內(nèi)邊距、背景、定位、元素寬高屬性。
盒子相關(guān)的樣式都不能繼承,比如:寬高、背景色、邊距、浮動、絕對定位等。
所有盒子相關(guān)的屬性都不能繼承
CSS的特殊性(優(yōu)先級)
CSS的特殊性,定義CSS樣式時,經(jīng)常出現(xiàn)兩個或更多規(guī)則應(yīng)用在同一元素上,那么誰的優(yōu)先級更高呢,這就是CSS的特殊性
比較CSS的優(yōu)先級的時候:
1、首先比較行內(nèi)樣式,行內(nèi)樣式優(yōu)先級最高。如果嵌入樣式和行內(nèi)樣式同時設(shè)置樣式時,行內(nèi)樣式優(yōu)先級最高。
2、其次是內(nèi)嵌樣式的優(yōu)先級比較:
內(nèi)嵌樣式的,ID選擇器對應(yīng)的樣式優(yōu)先級最高。
其次是Class樣式
再次是標(biāo)簽選擇器樣式,
再次是通配符選擇器設(shè)置的樣式
后面是 繼承的樣式,
最后是瀏覽器默認(rèn)的樣式。
CSS的案例得知:
結(jié)論一:繼承的樣式要大于默認(rèn)的樣式,
結(jié)論2: 通配符選擇器的樣式的優(yōu)先級比繼承樣式的優(yōu)先級要高。
結(jié)論3:標(biāo)簽的選擇器的優(yōu)先級要高于通配符選擇器的優(yōu)先級。
結(jié)論4:類選擇器的樣式的優(yōu)先級要高于 標(biāo)簽選擇器的樣式的優(yōu)先級。
結(jié)論5:id選擇器的優(yōu)先級高于 類選擇器的優(yōu)先級
結(jié)論6: 行內(nèi)樣式的選擇器的優(yōu)先級高于? id選擇器的優(yōu)先級。
復(fù)合選擇器的樣式優(yōu)先級核算:
復(fù)合選擇器 的優(yōu)先級根據(jù)四個層次來算,首先是行內(nèi)最高。
其次,比較所有的id選擇器的個數(shù),個數(shù)多的為高。
再次比較類選擇器的個數(shù),個數(shù)多的為高,
最后比較標(biāo)簽選擇器的個數(shù),個數(shù)多的為高。