不是所有的前端開發者都知道,CSS3并不是所有模塊都是新增的。實際上,有一些模塊在之前的CSS2.1規范中就已存在。
其中最受歡迎的模塊之一就是“偽類(pseudo-classes)”。這些選擇器讓開發者編寫特定狀態下的樣式,例如:hover用于鼠標懸停的狀態、:first-child用于第一個子元素等等。除此之外,偽類還能夠在HTML文檔中查找包含指定文本的元素。
另一個在CSS2.1中就已經存在的模塊是“盒模型(box model)”。這個模塊定義了HTML元素的尺寸、邊框、內邊距和外邊距,并且規定了如何計算元素的寬度和高度。雖然CSS3增加了一些新的盒模型特性,例如box-sizing屬性,但是基本的盒模型特性在CSS2.1中已經定義清楚了。
最后,還有一個在CSS2.1中就存在的模塊是“文本樣式(text styling)”。這個模塊定義了文本的顏色、大小、字體、行高等等特性。盡管CSS3引入了一些新的文本樣式特性,例如text-shadow和word-wrap,但是大部分基本的文本樣式屬性在CSS2.1中已經被定義了。
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; }