子選擇器的匹配範圍要比後代選擇器小,後代選擇器是子孫後代全部匹配,而子選擇器則只會匹配一級子元素。
E > F 子包含選擇器 選擇符合F的元素,且此元素為所符合E元素的子元素。
E>F
以上程式碼就是建立子選擇器的格式,中間用一個大於號分隔,程式碼實例如下:
.antzone>li{ color:blue }
以上程式碼只會講antzone下的一級子元素li的字體顏色設定為藍色。
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>PHP中文网</title> <style type="text/css"> #box > ul{ color:blue } </style> </head> <body> <div id="box"> <ul> <li>欢迎来到PHP中文网</li> <li>PHP中文网欢迎您</li> </ul> <div> <ul> <li>欢迎来到PHP中文网</li> <li>PHP中文网欢迎您</li> </ul> </div> </div> </body> </html>
由上面的程式碼可以看到只有box元素的第一層ul子元素中的字體顏色才會被設定為藍色。
下一節