CSS,大于号,子代选择符div span是上下文选择符，表示选择div里面的所有span，注意是所有的，无论是不是直接承下关系。 但是div>span不同。 >(大于号)是子代选择符，它表示的是选择div的子代span。 例如在结构
<div id="keleyi"> <span id="erzi-keleyi-com">儿子span <span id="sunzi-keleyi-com">孙子span</span> </span> </div> <span>非div内部span</span> div>span只能选择id="erzi-keleyi-com"的span，因为它是div的子代。而id="sunzi-keleyi-com"的span没有被选择。 下面为实例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"> <head> <title>css大于号示例</title> <style> div{border:1px solid green;margin:10px}/*div为绿色边框*/ span{display:block;background-color:Silver;padding:10px;margin:10px;}/*span背景颜色为银色*/ div>span{border:1px solid red;}/*有大于号*/ </style> </head> <body> <div><a href="<a href="http://www.jb51.net/">http://www.jb51.net/</a>" target="_blank">web前端</a> <a href="<a href="http://www.jb51.net">http://www.jb51.net</a>" target="_blank">没有大于号的</a> </div> <div>只有div的儿子span元素有红色边框</div> <div id="keleyi"> <span id="erzi-keleyi-com">div儿子span <span id="sunzi-keleyi-com">div孙子span </span> </div> <span>非div内部span</span></p><p></body> </html></p><p>
CSS,大于号,子代选择符
|
