CSS中選擇器的種類很多,選父元素的方式也有不少,這里介紹幾種常見的方式。
/*子元素選擇器*/ .parent > .child { /*樣式*/ } /*后代元素選擇器*/ .parent .child { /*樣式*/ } /*通配符加后代元素選擇器*/ .parent * .child { /*樣式*/ }
以上三種方式區別在于對父元素和子元素的關系的描述不同。
第一種方式是子元素選擇器,使用>符號選擇直接子元素,只對一級子元素產生效果。
第二種方式是后代元素選擇器,使用空格選擇所有子元素,包括嵌套在多個子元素中的元素。
第三種方式是使用通配符加后代元素選擇器,多個子元素之間可以有其他元素層級,只要父元素存在即可。
/*相鄰兄弟選擇器*/ .brother + .brother { /*樣式*/ } /*一般兄弟選擇器*/ .brother ~ .brother { /*樣式*/ }
還有兩種選擇器是選擇兄弟元素的方式,第一種是相鄰兄弟選擇器,用+號表示選擇下一個相鄰的兄弟元素,只對第二個元素產生效果,第二種是一般兄弟選擇器,用~號表示選擇所有兄弟元素,只對后面的元素產生效果。
了解以上幾種選擇器的使用方式,可以更好地操作元素之間的層級關系,實現各種效果。