與后代選擇器相比,子元素選擇器只能選擇作為某元素子元素的元素。
子元素選擇器使用大于號">"做為連接符。
如果您不希望選擇任意的后代元素,而是希望縮小范圍,只選擇某個元素的子元素,請使用子元素選擇器
子元素選擇器語法
element>element{屬性:值;}
例如:
div>p{
background-color:yellow;
}
父元素與子元素必須用>隔開,從而表示選中某個元素下的子元素
子元素選擇器實例
div>p{
background-color:yellow;
}
Welcome to My Homepage
My name is Donald
I live in Duckburg.
I will not be styled.
My best friend is Mickey.
div>p表示選中div元素下的直接P元素,實例中滿足這一要求的只有
I live in Duckburg.
這一個元素。可能有人會問
I will not be styled.
這個P元素也在div元素里面啊,為什么沒有被選中,因為這個元素是div的后代元素(在這里P相當于是div元素的孫子輩,而不是兒子輩),并不是div的子元素。所以大家要明白什么是后代元素和子元素。后代元素:后代元素是指包含在自定元素里面的所有元素,這里要特別注意,是有所的元素。
子元素:子元素是指某一元素的兒子元素,他們之間只有一代的關系,多代關系不能算子元素。