手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS样式中大于号的使用及Css中处理继承方法
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样式中大于号的使用及Css中处理继承方法】相关文章:

CSS实现带箭头的DIV提示框

CSS常见属性缩写与全写对比

CSS 制作的三级菜单特效代码

给表格设置不重叠的边框(单线边框)的2种方法

网页添加CSS样式表的四种方式

CSS样式颜色属性的使用

CSS样式表层叠(cascade)处理冲突

CSS里display的使用方法

使用CSS代码的空格实现中文对齐的方法

采用DIV+CSS布局的好处

精品推荐
分类导航