在CSS中,繼承是一種很有用的特性,可以讓我們在代碼中節(jié)省很多重復(fù)的代碼。CSS中有兩種繼承方式:屬性繼承和選擇器繼承。
屬性繼承: .box { color: red; } p { font-size: 16px; }
屬性繼承是指子元素繼承父元素中已經(jīng)定義好的屬性值。從上面的代碼中可以看出,所有p標(biāo)簽的字體大小都會繼承.box類中定義的顏色值。這種繼承方式,是比較常見的一種,有一些屬性是默認(rèn)具有繼承性的,比如顏色color、字體font、文本text等。
選擇器繼承: .box { color: red; font-size: 20px; } .box p { font-size: inherit; }
選擇器繼承是指子元素繼承父元素的選擇器,不會繼承具體的屬性值,而是繼承屬性值所屬的選擇器。從上面的代碼中可以看出,.box p選擇器繼承了.box類,但是沒有繼承具體的顏色值和字體大小值,而是使用了inherit關(guān)鍵字,表示繼承父元素的屬性值,這種繼承方式,可以讓代碼結(jié)構(gòu)更加清晰,也便于維護(hù)管理。
兩種繼承方式在實際開發(fā)中都會用到,它們可以大大減少代碼量,也可以讓代碼結(jié)構(gòu)更加清晰。但是,過度依賴?yán)^承也會導(dǎo)致代碼難以維護(hù),因為當(dāng)我們把父元素的屬性值修改之后,可能會影響很多子元素,所以在使用繼承時,需要根據(jù)實際情況來判斷是否使用。
下一篇jquery anim