CSS样式中” 大于号”

兼容适配 软件兼容
1

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标签，代码如下：

亲人

独家记忆
离不开你

此时用CSS定义其样式应该这样： div span { font:10px; color:blue; } 但是此时，需要将第一个span标签显示不同的样式，后两个标签样式不变，怎么办呢？将第一个span放到一个p标签中，这样可以吗？代码如下：

亲人

独家记忆 离不开你
遗憾的是这样不可以，因为div span {……}样式对div层之下的所有span标签都起作用，不管是子标签，还是孙子辈的标签，所以该样式依然起作用。此时就用到了CSS中的”大于号”。 现在我们把这个样式改变一下，代码如下： div > span { font:10px; color:blue; } 这样就可以实现第一个span标签与其它两个显示不同的样式。所以我们可以知道CSS中的”大于号”的作用是：在嵌套标签中，将样式只作用于儿子辈的标签，而不作用于孙子辈的标签。

但是还存在这样一种情况，如下代码：

亲人 丁当 独家记忆 离不开你
此时，这个”大于号”还会起作用吗？答案是：不会。因为这个孙子辈的span标签继承儿子辈的span标签样式。