在CSS中,使用兩個(gè)class進(jìn)行樣式設(shè)置是非常常見的。而如何使用兩個(gè)class呢?下面我們來看看具體實(shí)現(xiàn)。
/*首先我們需要在HTML中定義兩個(gè)class*/ <p class="first-class second-class">這是一個(gè)段落</p> /*然后我們在CSS中定義樣式*/ .first-class { color: red; /*設(shè)置文本顏色為紅色*/ font-size: 16px; /*設(shè)置字體大小為16像素*/ } .second-class { font-style: italic; /*設(shè)置文本傾斜*/ text-decoration: underline; /*給文本添加下劃線*/ } /*最后,我們可以將兩個(gè)class合并使用*/ .first-class.second-class { background-color: blue; /*設(shè)置背景顏色為藍(lán)色*/ padding: 10px; /*設(shè)置內(nèi)邊距為10像素*/ }
在上面的代碼中,我們首先在HTML中定義了一個(gè)具有兩個(gè)class的段落元素。然后在CSS中,我們使用了三個(gè)class,分別是first-class、second-class和first-class.second-class。
其中first-class和second-class是單獨(dú)使用的,而first-class.second-class則是將兩個(gè)class合并使用。最終,我們成功地對該段落進(jìn)行了紅色文本、16像素字體大小、傾斜和下劃線的設(shè)置,并且將其背景色設(shè)置為藍(lán)色、內(nèi)邊距10像素。