您的位置:首页 - web前端
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="http://keleyi.com/menu/webqd/" target="_blank">web前端</a> <a href="http://keleyi.com/keleyi/phtml/divcss/9a.htm" target="_blank">没有大于号的</a><br />
</div>
<div>只有div的儿子span元素有红色边框</div>
<div id="keleyi">
<span id="erzi-keleyi-com">div儿子span
<span id="sunzi-keleyi-com">div孙子span <a href="http://keleyi.com/a/bjac/0oj2l9ht.htm" target="_blank">原文</a></span>
</span>
</div>
<span>非div内部span</span>

</body>
</html>

以上代码效果预览:http://keleyi.com/keleyi/phtml/divcss/9.htm
本站导航
相关文章
柯乐义 Copyright© keleyi.com