CSS3的> 和@

#quickSummary p{color:red;}
#quickSummary >p+p{color:red;}
#quickSummary>p+p+p{color:inherit;}

     这段代码中的>表示的是选择quickSummary所有p子元素，这个是CSS3特有的选择器，E > F表示选择E元素的所有子F元素，与E F的区别在于，E F选择所有后代元素，>只选择一代。CSS3中并无<的用法。

    举个例子：div span{...}这样写，div下的不论是儿子辈的span还是孙子辈的span都应用样式，即div 下的所有span元素都有这个样式。

但是 div > span{...}这样写，div下的只有儿子辈的span应用样式。

   >这个样式在IE6下不适用。

举例说明：有一个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标签样式。

 

     E + F表示HTML中紧随E的F元素。

　CSS中的@选择符的作用：

          @是CSS的一中选择符，有很多应用场景，最常用的场景是用来引用其他的CSS文件，是以@import开始的，例如若想在main.css里面应用style.css,那么直接用@import style.css就可以了。导入样式中用到，链接样式是以@import url标记所链接的外部样式表，它一般常用在另一个样式表内部。如layout.css为主页所用样式，

那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@import url("/css/global.css")的形式链接全局样式，这样可以使代码达到很好的重用性。

　　　　另外，还有一种使用场景是媒体选择，是以@media开始的，表示在不同媒介条件下的样式，当想做响应式的页面布局时，例如希望当浏览器的

宽度小于1000px时，网页背景变成黑色，就可以用下面的方法：

@media screen and (max-width: 1000px) {
    body {background;black}
}

  当希望用打印机打印网页时呈现某种样式，就可以用@media print 的方法来定义。