CSS样式中大于号的使用及Css中处理继承方法
继承在一定程度上让程序在编写的过程中更加方便,但是有时候也会给我们的程序带来一定的困扰,所以认真的学习继承的原理,以及处理的方法很重要。下面是Css中处理继承的一个方法。
在一段CSS代码中见到一个大于号(>),代码如下:
BODY#css-zen-garden > DIV#extraDiv2 { BACKGROUND-IMAGE:url(../images/bg_face.jpg); Z-INDEX: 2; POSITION: fixed; WIDTH: 205px; BOTTOM: 0px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: left bottom; HEIGHT: 594px; LEFT: 0px }
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标签样式。
相关文章
- 下面小编就为大家带来一篇CSS默认可继承样式详解。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-05-06
- CSS样式表空格与不空格的关系2009-12-08
CSS教程:学习CSS的继承性-CSS教程-网页制作-网页教学网
所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设,需要指定为其它样式的部份设定在个别元素里即可。这项2008-10-17CSS样式表中继承关系的空格与不空格-CSS教程-网页制作-网页教学网
这可能是一个非常简单的问题,但是今天花一点点时间把这个简单的问题在说清晰一点,相信大家对CSS的学习和认识会很有帮助,强化一些概念的东西,对以后的工作效率的2008-10-17- 这篇文章主要介绍了CSS样式继承和层叠的相关资料,需要的朋友可以参考下2017-04-21
最新评论