CSS中選擇器的應(yīng)用非常靈活,很多時(shí)候選擇器可以串聯(lián)起來(lái)使用,這樣能夠更加精準(zhǔn)地定位到某個(gè)元素。而除了串聯(lián)使用,CSS選擇器之間還可以用逗號(hào)分隔,來(lái)同時(shí)選擇多個(gè)元素。
例如:
header, footer { background-color: gray; color: white; }
上面的選擇器就同時(shí)選擇了header和footer元素,然后把它們的背景設(shè)置成了灰色,字體顏色設(shè)置為白色。
我們還可以在選擇器中使用通配符,來(lái)選擇所有滿(mǎn)足條件的元素,例如這樣:
*, *::before, *::after { box-sizing: border-box; }
上面的選擇器中,使用了通配符,選擇了每個(gè)元素以及它們的before和after偽元素,在這些元素之上設(shè)置了盒模型的box-sizing屬性。
使用逗號(hào)分隔的選擇器可以讓我們更加方便地管理樣式,例如我們可以方便地對(duì)整個(gè)網(wǎng)站的header或者footer設(shè)置樣式。同時(shí),對(duì)于一些有相似樣式的元素,也可以用逗號(hào)分隔的方式同時(shí)選中它們進(jìn)行更快速地樣式修改。
不過(guò)需要注意的是,使用逗號(hào)分隔的選擇器只是選中了多個(gè)元素,它并不會(huì)影響其他選擇器的優(yōu)先級(jí)。因此,如果被逗號(hào)分隔的選擇器和其他選擇器有沖突的樣式,仍然會(huì)遵循CSS的優(yōu)先級(jí)原則。