手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS样式子代选择符(大于号 >)使用实例
CSS样式子代选择符(大于号 >)使用实例
摘要:divspan是上下文选择符,表示选择div里面的所有span,注意是所有的,无论是不是直接承下关系。但是div>span不同。>(大于号)...

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样式子代选择符(大于号 >)使用实例】相关文章:

对div盒子模型使用心得总结

CSS Wave滤镜用法示例

CSS代码如何使图片自适应显示宽度

CSS样式表高效使用技巧充分利用样式表的强大性

CSS样式表使用的技巧

20个实用便捷的CSS3工具、库及实例

css串联选择器和后代选择器使用方法

CSS+DIV表格背景透明内容不透明

CSS3之边框多颜色Border-color属性使用示例

CSS常用样式效果

精品推荐
分类导航