在CSS中,我們可以使用多層書寫來優(yōu)化我們的樣式表。多層書寫是指將多個樣式權(quán)重遞增的選擇器放在同一個規(guī)則集里,這樣就可以充分利用CSS的層疊規(guī)則,保證樣式的優(yōu)先級。
/* 這是一個簡單的例子 */ p { color: red; } .container p { font-size: 16px; } .container .special p { font-weight: bold; }
上面的例子中,我們定義了三個規(guī)則集。第一個規(guī)則集是針對所有的p元素,將它們的字體顏色設(shè)為紅色。第二個規(guī)則集是針對class為.container的元素內(nèi)部的p元素,將它們的字體大小設(shè)為16px。第三個規(guī)則集是針對同時有container類和special類的元素內(nèi)部的p元素,將它們的字體加粗。
這里我們可以發(fā)現(xiàn),第三個規(guī)則集的選擇器比前兩個規(guī)則集的選擇器更加具體,因此第三個規(guī)則集的樣式優(yōu)先級更高。如果一個p元素同時屬于.container和.special兩個類,那么它的字體顏色會是紅色,字體大小會是16px,字體會加粗。
通過這種方式,我們可以極大地簡化我們的樣式表,提高我們的效率。但是需要注意的是,多層書寫要盡量避免層級過深,過多的選擇器嵌套會影響選擇器匹配的速度,從而影響網(wǎng)頁性能。
上一篇jq .css 動畫
下一篇jq css樣式多個