CSS偽類
狀態(tài)是動態(tài)變化的,當(dāng)一個(gè)元素達(dá)到一個(gè)特定狀態(tài)時(shí)辽旋,它可能得到一個(gè)樣式,當(dāng)狀態(tài)改變時(shí)檐迟,又失去這個(gè)樣式补胚。
它的功能和class有些類似,但它是基于文檔之外的抽象追迟,所以叫偽類
:link
偽類將應(yīng)用于未被訪問過的鏈接溶其。IE6不兼容,解決此問題敦间,直接使用a標(biāo)簽瓶逃。
:hover
偽類將應(yīng)用于有鼠標(biāo)指針懸停于其上的元素。在IE6只能應(yīng)用于a連接廓块,IE7+所有元素都兼容厢绝。
:active
偽類將應(yīng)用于被激活的元素,如被點(diǎn)擊的鏈接剿骨、被按下的按鈕等代芜。
:visited
偽類將應(yīng)用于已經(jīng)被訪問過的鏈接
:focus
偽類將應(yīng)用于擁有鍵盤輸入焦點(diǎn)的元素埠褪。
順序問題:LoVe? HAte原則浓利。
注意:順序一定是Link-Visited-Hover-Active
CSS偽元素
偽元素 是控制內(nèi)容
:first-line 偽元素
:first-letter 偽元素
注釋:以上兩個(gè)偽元素只能用于塊級元素
:first-child 偽元素,選擇屬于第一個(gè)子元素的元素钞速。
偽類是狀態(tài),偽元素是內(nèi)容
例如:span:first-child{}? /*選擇屬于第一個(gè)子元素的所有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)簽為塊級元素驾凶,獨(dú)占行牙甫。
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樣式時(shí),經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上吭从,那么誰的優(yōu)先級更高呢朝蜘,這就是CSS的特殊性
比較CSS的優(yōu)先級的時(shí)候:
1、首先比較行內(nèi)樣式影锈,行內(nèi)樣式優(yōu)先級最高芹务。如果嵌入樣式和行內(nèi)樣式同時(shí)設(shè)置樣式時(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ù)四個(gè)層次來算,首先是行內(nèi)最高驱还。
其次嗜暴,比較所有的id選擇器的個(gè)數(shù),個(gè)數(shù)多的為高议蟆。
再次比較類選擇器的個(gè)數(shù)闷沥,個(gè)數(shù)多的為高,
最后比較標(biāo)簽選擇器的個(gè)數(shù)咐容,個(gè)數(shù)多的為高舆逃。