最常見的CSS選擇器包括標(biāo)簽選擇器、類選擇器、ID選擇器、屬性選擇器等等。它們都可以方便地定位到HTML文檔中的元素，實(shí)現(xiàn)樣式的設(shè)置。但有時(shí)我們需要給某一組元素設(shè)置相同的樣式，這時(shí)候就可以使用多個(gè)選擇器來進(jìn)行選擇。

另外，有時(shí)候我們會(huì)為某些元素單獨(dú)設(shè)置樣式，但不希望他們被其他選擇器所影響，這時(shí)候維護(hù)一個(gè)清晰的選擇器順序就顯得尤為重要。但也很容易犯混淆的錯(cuò)誤，使得CSS樣式無法正常運(yùn)行。

/*以下代碼是一個(gè)選擇器混淆的例子，帶來了不必要的麻煩*/
/*使用后代選擇器為class為boxB的元素中的p元素設(shè)置文字顏色*/
.boxB p {
color: #666;
}
/*此時(shí)又發(fā)現(xiàn)class為boxB的p元素中還有a元素，需要對(duì)其進(jìn)行樣式設(shè)置*/
.boxB a {
color: #f00;
}

在上述代碼中，為class為boxB的元素中的p元素設(shè)置文字顏色時(shí)使用了后代選擇器，并沒指明要選擇的是p元素。而在為p元素中的a元素設(shè)置文字顏色時(shí)，使用的是.class選擇器來定位元素。正常情況下，這兩種選擇器雖然都能起到定位元素的作用，但放在不同位置上，則會(huì)產(chǎn)生不同的選擇效果。

對(duì)于這種混淆的現(xiàn)象，為了避免類似的問題，可以采用以下方法：

/*使用按鈕樣式中的層疊選擇器，即為每個(gè)選擇器添加一個(gè)波浪線*/
/*為class為boxB的元素中的p元素設(shè)置文字顏色，并使用層疊選擇器*/
.boxB {
& ~ p {
color: #666;
}
}
/*此時(shí)又希望為p元素中的a元素設(shè)置文字顏色*/
.boxB {
& ~ a {
color: #f00;
}    
}

通過使用層疊選擇器，可以將選擇器排列在一起，從而一眼看出所有選擇器的關(guān)系，不會(huì)產(chǎn)生混淆。