CSS(層疊樣式表)是一種用于網頁排版和樣式管理的技術。在CSS中定義樣式時,我們可以給某個元素添加一個或多個類名,并且這些類名不需要使用空格隔開。
比如下面這個例子,我們給一個按鈕元素定義了兩個類名btn和primary:
<button class="btn primary">點擊</button>
這意味著按鈕元素同時擁有btn和primary這兩個類名的樣式。在CSS中,我們可以這樣定義這兩個類的樣式:
.btn { border: 1px solid #ccc; padding: 10px; } .primary { background-color: #007bff; color: #fff; font-weight: bold; }
因為這兩個類名沒有空格隔開,所以它們被認為是同一個元素的樣式,而不是不同的元素。這種方式可以讓代碼更簡潔易懂,也更方便擴展和維護。
除了同時擁有不同類名的樣式,我們還可以使用一個類名來表示多個元素的樣式。比如下面這個例子中,我們給多個按鈕元素設置了同一個類名btn:
<button class="btn">按鈕1</button> <button class="btn">按鈕2</button> <button class="btn">按鈕3</button>
這樣,我們就可以定義一個btn類的樣式,來同時控制這幾個按鈕元素的樣式:
.btn { border: 1px solid #ccc; padding: 10px; background-color: #f8f8f8; }
如此一來,無論我們有多少個按鈕元素,只需要添加一個btn類名就可以讓它們擁有相同的樣式了。