053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

css中大于号的作用解析

时间:2014-09-19

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标签样式。

相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP