#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- 1000px) { body {background;black} }
当希望用打印机打印网页时呈现某种样式，就可以用@media print 的方法来定义。