杰晶网络

CSS样式中大于号的使用及Css中处理继承方法
网页制作 2024/12/26 佚名
3 2

继承在一定程度上让程序在编写的过程中更加方便，但是有时候也会给我们的程序带来一定的困扰，所以认真的学习继承的原理，以及处理的方法很重要。下面是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样式,大于号,继承
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网