在CSS中,我們經(jīng)常會(huì)使用到類選擇器(class selector)來為元素設(shè)置樣式。然而,有時(shí)候我們需要為一個(gè)元素同時(shí)設(shè)置多個(gè)類的樣式,這時(shí)候就需要使用到li擴(kuò)展CSS。
li擴(kuò)展CSS是一種讓我們可以同時(shí)為一個(gè)元素多個(gè)類設(shè)置樣式的方法,它使用&符號(hào)來連接不同的類,形成類似于嵌套選擇器的樣式。
例如,我們有以下的HTML代碼:
<div class="box item-1"> <p>這是一個(gè)普通的段落</p> </div>
現(xiàn)在我們想要為這個(gè)元素同時(shí)設(shè)置box和item-1兩個(gè)類的樣式,我們可以這么寫:
.box { background-color: #eee; padding: 10px; } .item-1 { font-weight: bold; } .box.item-1 { border: 1px solid #ccc; }
上面的代碼中,我們分別為.box和.item-1設(shè)置了它們各自的樣式,然后使用.box.item-1來同時(shí)為這個(gè)元素設(shè)置兩個(gè)類的樣式。這樣,這個(gè)元素就會(huì)擁有.box和.item-1兩個(gè)類的所有樣式。
可以看到,li擴(kuò)展CSS讓我們可以更方便地為元素設(shè)置多個(gè)類的樣式,使得我們的代碼更加簡潔易讀。