网站建设   网站建设技术   网页设计   html/css  

CSS样式中大于号的使用及Css中处理继承方法

人浏览  发布时间:2021-04-24

继承在一定程度上让程序在编写的过程中更加方便,但是有时候也会给我们的程序带来一定的困扰,所以认真的学习继承的原理,以及处理的方法很重要。下面是Css中处理继承的一个方法。 在一段CSS代码中见到一个大于号(),代码如下: 1 2 3 4 5 6 7 8 9 10 11 BODY#css-zen-garden DIV#extraDiv 2 { 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标签,代码如下: 1 2 3 4 5 div span 亲人/ span span 独家记忆/ span span 离不开你/ span / div 此时用CSS定义其样式应该这样: 1 2 3 4 div span { font : 10px ; color : blue ; } 但是此时,需要将第一个span标签显示不同的样式,后两个span标签样式不变,怎么办呢?将第一个span放到一个p标签中,这样可以吗?代码如下: 1 2 3 4 5 6 7 div p span 亲人/ span / p span 独家记忆/ span span 离不开你/ span / div 遗憾的是这样不可以,因为div span {}样式对div层之下的所有span标签都起作用,不管是子标签,还是孙辈的标签,所以该样式依然起作用。此时就用到了CSS中的大于号。 现在我们把这个样式改变一下,代码如下: 1 2 3 4 div span { font : 10px ; color : blue ; } 这样就可以实现第一个span标签与其它两个显示不同的样式。所以我们可以知道CSS中的大于号的作用是:在嵌套标签中,将样式只作用于儿子辈的标签,而不作用于孙子辈的标签。 但是还存在这样一种情况,如下代码: 1 2 3 4 5 6 7 div span 亲人 span 丁当/ span...
继承在一定程度上让程序在编写的过程中更加方便,但是有时候也会给我们的程序带来一定的困扰,所以认真的学习继承的原理,以及处理的方法很重要。下面是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标签样式。
(编辑:360度神搜网)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:陕西省西安市,长乐西路180号 WebDesign ©2012 Corporation 360°神搜网网络科技传媒技术服务工作室 网站地图