CSS中選擇器的使用是非常靈活的,除了基本的類選擇器、ID選擇器、標簽選擇器等外,還有一些比較特殊的選擇器。其中,有一個選擇兄弟不包含的選擇器,也就是“~”。
使用“~”選擇器,可以選擇某個元素后面的所有兄弟元素,但是不包括它自己。例如:
.box ~ div { color: red; }
上面的例子中,選擇所有類名為“box”的元素后面的所有div元素,并將它們的文字顏色設為紅色。
但是,有些情況下,我們希望選擇的兄弟元素包括第一個兄弟元素,這時就不能使用“~”選擇器了,而需要使用“+”選擇器。
.box + div { color: red; }
上面的例子中,選擇所有類名為“box”的元素后面的第一個div元素,并將它的文字顏色設為紅色。
需要注意的是,使用選擇兄弟不包含的選擇器時,選擇器前面一定要加上一個元素,否則選擇器無效。例如:
~ div { color: red; }
上面的例子中,選擇不包含任何元素的兄弟div元素,是無效的。
總之,選擇兄弟不包含的選擇器在實際的開發中是經常使用的,我們需要熟練掌握它的用法,提高我們的CSS編程技能。
下一篇css 選中時描邊