不是所有的前端開發(fā)者都知道,CSS3并不是所有模塊都是新增的。實(shí)際上,有一些模塊在之前的CSS2.1規(guī)范中就已存在。
其中最受歡迎的模塊之一就是“偽類(pseudo-classes)”。這些選擇器讓開發(fā)者編寫特定狀態(tài)下的樣式,例如:hover用于鼠標(biāo)懸停的狀態(tài)、:first-child用于第一個(gè)子元素等等。除此之外,偽類還能夠在HTML文檔中查找包含指定文本的元素。
另一個(gè)在CSS2.1中就已經(jīng)存在的模塊是“盒模型(box model)”。這個(gè)模塊定義了HTML元素的尺寸、邊框、內(nèi)邊距和外邊距,并且規(guī)定了如何計(jì)算元素的寬度和高度。雖然CSS3增加了一些新的盒模型特性,例如box-sizing屬性,但是基本的盒模型特性在CSS2.1中已經(jīng)定義清楚了。
最后,還有一個(gè)在CSS2.1中就存在的模塊是“文本樣式(text styling)”。這個(gè)模塊定義了文本的顏色、大小、字體、行高等等特性。盡管CSS3引入了一些新的文本樣式特性,例如text-shadow和word-wrap,但是大部分基本的文本樣式屬性在CSS2.1中已經(jīng)被定義了。
p { font-size: 1.2em; color: #333; line-height: 1.5; } p:first-child { margin-top: 0; } h1 { font-size: 2em; text-align: center; margin-bottom: 1.5em; }