CSS第一小節(jié)第三天

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ù)多的為高。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容