关于CSS样式中的>大于号4313

一次在CSS样式中看到有大于号(>)
    代码如下:

.red > span {

    background-color: #f0a3a3;
    background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
    background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
}
CSS中的大于号表示什么意思呢?
举例说明:有一个DIV层包含多个span标签,代码如下:
<div> <span>NOKIA</span> <span>SAMSUNG</span> <span>iPhone</span> </div>
此时用CSS定义其样式应该这样:
div span {
       font:10px;
       color:blue;
}

但是此时,需要将第一个span标签显示不同的样式,后两个<span>标签样式不变,怎么办呢?将第一个span放到一个p标签中,这样可以吗?代码如下:
<div>
  <p><span>NOKIA</span></p>
  <span>SAMSUNG<</span>
  <span>iPhone</span>
</div>
遗憾的是这样不可以,因为div span {……}样式对div层之下的所有span标签都起作用,不管是子标签,还是孙子辈的标签,所以该样式依然起作用。此时就用到了CSS中的”大于号”。

       现在我们把这个样式改变一下,代码如下:
div > span {
       font:10px;
       color:blue;
}

这样就可以实现第一个span标签与其它两个显示不同的样式。所以我们可以知道CSS中的”大于号”的作用是:在嵌套标签中,将样式只作用于儿子辈的标签,而不作用于孙子辈的标签。
但是还存在这样一种情况,如下代码:
<div> <span>android <span> IOS</span> </span> <span>Palm</span> <span>锤子ROM</span> </div>
此时,这个”大于号”还会起作用吗?答案是:不会。因为这个孙子辈的span标签继承儿子辈的span标签样式

Leave a Reply

About

Butcher WEB前端攻城湿 @重庆,不忘初心 以简驭繁~

搜索

最新评论

  1. 我有故事你有酒吗 Post:
  2. @来语:这个学习了,谢谢... Post:
  3. @钟水洲博客:好?收藏.... Post:
  4. 岁月如歌 Post:
  5. @钟水洲博客:这东西我收... Post:

赞助商

微博墙

标签

Partner

链接