CSS款式广州中山大学于号的应用及Css中解决承继

2021-03-18 17:30 jianzhan

承继在1定水平上让程序流程在撰写的全过程中更为便捷,可是有时也会给大家的程序流程带来1定的困扰,因此用心的学习培训承继的基本原理,和解决的方式很关键。下面是Css中解决承继的1个方式。

在1段CSS编码中见到1个超过号(>),编码以下:

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中的超过号表明甚么意思呢?

举例表明:有1个DIV层包括好几个span标识,编码以下:

<div> 
<span>亲人</span> 
<span>独家记忆力</span> 
<span>离不开你</span> 
</div> 

此时用CSS界定其款式应当这样:

div span { 
font:10px; 
color:blue; 
}

可是此时,必须将第1个span标识显示信息不一样的款式,后两个<span>标识款式不会改变,如何办呢?将第1个span放到1个p标识中,这样能够吗?编码以下:

<div> 
<p> 
<span>亲人</span> 
</p> 
<span>独家记忆力</span> 
<span>离不开你</span> 
</div> 

遗憾的是这样不能以,由于div span {……}款式对div层之下的全部span标识都起功效,无论是子标识,還是孙辈的标识,因此该款式仍然起功效。此时就用到了CSS中的”超过号”。

如今大家把这个款式更改1下,编码以下:

div > span { 
font:10px; 
color:blue; 
}

这样便可以完成第1个span标识与其它两个显示信息不一样的款式。因此大家能够了解CSS中的”超过号”的功效是:在嵌套循环标识中,将款式只功效于儿子辈的标识,而不功效于孙子辈的标识。

可是还存在这样1种状况,以下编码:

<div> 
<span>亲人 
<span>丁当</span> 
</span> 
<span>独家记忆力</span> 
<span>离不开你</span> 
</div>

此时,这个”超过号”还会起功效吗?回答是:不容易。由于这个孙子辈的span标识承继儿子辈的span标识款式。