继承给我们的程序带来一定的困扰,所以认真的学习继承的原理,下面有个不错的示例,一个处理继承的一个方法,感兴趣的朋友可以参考下
继承在一定程度上让程序在编写的过程中更加方便,但是有时候也会给我们的程序带来一定的困扰,所以认真的学习继承的原理,以及处理的方法很重要。下面是Css中处理继承的一个方法。
在一段CSS代码中见到一个大于号(>),代码如下:
BODY#css-zen-garden > p#extrap2 { 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中的大于号表示什么意思呢?
举例说明:有一个p层包含多个span标签,代码如下:
<p> <span>亲人</span> <span>独家记忆</span> <span>离不开你</span> </p>
此时用CSS定义其样式应该这样:
p span { font:10px; color:blue; }
但是此时,需要将第一个span标签显示不同的样式,后两个标签样式不变,怎么办呢?将第一个span放到一个p标签中,这样可以吗?代码如下:
<p> <p> <span>亲人</span> </p> <span>独家记忆</span> <span>离不开你</span> </p>
遗憾的是这样不可以,因为p span {……}样式对p层之下的所有span标签都起作用,不管是子标签,还是孙辈的标签,所以该样式依然起作用。此时就用到了CSS中的”大于号”。
现在我们把这个样式改变一下,代码如下:
p > span { font:10px; color:blue; }
这样就可以实现第一个span标签与其它两个显示不同的样式。所以我们可以知道CSS中的”大于号”的作用是:在嵌套标签中,将样式只作用于儿子辈的标签,而不作用于孙子辈的标签。
但是还存在这样一种情况,如下代码:
<p> <span>亲人 <span>丁当</span> </span> <span>独家记忆</span> <span>离不开你</span> </p>
此时,这个”大于号”还会起作用吗?答案是:不会。因为这个孙子辈的span标签继承儿子辈的span标签样式。
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
以上是关于CSS样式中大于号的使用及Css中处理继承方法的详细内容。更多信息请关注PHP中文网其他相关文章!