CSS 样式里面的大于号表示“只有儿子辈的应用样式继承”

转载于

https://www.cnblogs.com/ranzige/p/css_sub.html

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标签样式。