Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > Div+CSS > CSS中的(或jquery选择器中的)大于号“>”是什么意思?
隐藏/显示侧边栏

CSS中的(或jquery选择器中的)大于号“>”是什么意思?

2014-02-12 22:15    来源:http://www.cgner.com    责任编辑:程管网    字号【
我们都知道CSS中或者说Jquery中的选择器  div  span ,这种中间空格的格式表示div下面的所有span标签,无论是儿子辈还是孙子辈。
那么div > span 表示什么意思呢? css中的大于号,准确生活css3中的大于号">"表示什么意思呢?
答:div > span 这种格式的表示,div下面的直系的span标签,也就是儿子辈的span标签。

那有人有问了如果这种情况呢?
<div>
  <span><span></span></span>
  <span></span>
</div>


这种情况,相当于<span><span></span></span>孙子辈span继承了儿子辈span(相对于span)的css,等于没效果了。大于号对于这种情况就没效果了。

下面是网络摘抄部分,更详细:

CSS中的大于号表示什么意思呢?


举例说明:有一个DIV层包含多个span标签,代码如下:

<div>

       <span>亲人</span>



       <span>独家记忆</span>

       <span>离不开你</span>

</div>

此时用CSS定义其样式应该这样:

div span {

       font:10px;

       color:blue;

}

但是此时,需要将第一个span标签显示不同的样式,后两个<span>标签样式不变,怎么办呢?将第一个span放到一个p标签中,这样可以吗?代码如下:

<div>

       <p>

              <span>亲人</span>

       </p>

       <span>独家记忆</span>

       <span>离不开你</span>

</div>

       遗憾的是这样不可以,因为div span {……}样式对div层之下的所有span标签都起作用,不管是子标签,还是孙子辈的标签,所以该样式依然起作用。此时就用到了CSS中的”大于号”。

       现在我们把这个样式改变一下,代码如下:

div > span {

       font:10px;

       color:blue;

}

这样就可以实现第一个span标签与其它两个显示不同的样式。所以我们可以知道CSS中的”大于号”的作用是:在嵌套标签中,将样式只作用于儿子辈的标签,而不作用于孙子辈的标签。



但是还存在这样一种情况,如下代码:

<div>

       <span>

亲人

              <span>

                     丁当

</span>

</span>

       <span>独家记忆</span>

       <span>离不开你</span>

</div>

此时,这个”大于号”还会起作用吗?答案是:不会。因为这个孙子辈的span标签继承儿子辈的span标签样式。

************************************************************************************
谨记:div  > span  大于号是直系的,儿子辈的;div span   空格表示所有子孙。
************************************************************************************



更多
Tags 标签:
责任编辑:程管网
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |