首页 > 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标签,代码如下:

亲人 独家记忆 离不开你
此时用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标签样式。

上一篇: 制作wordpress导航菜单栏

下一篇: wordpress调用指定分类文章