<div>
<p id="p1"></p>
<b><p id="p2"></p></b>
<ul>
<li><p id="p3"></p></li>
<li><div><p id="p4"></p></div></li>
</ul>
</div>
这个例子中如果是div p{font-size:5em}，那div中所有的p（p1,p2,p3,p4）都会加上字体大小5em。
但是如果是div>p这种写法，那只有p1、p4会加上这个属性。
在这里小于号表示只有p是跟在div后面的一级子元素，属性才会起作用。
三个“>>>”是vue里面的写法，与css3中的“>”类似。如：A>B 表示选择A元素的所有子元素B。与A B写法的区别在于，A B选择所有后代元素，而A>B只选择一代。嗯，你应该说的是高级选择器，你说的那个是子对像选择符：body>p{color:#f00}
*{color:#00f}/*通配符*/
a[title]{color:#0f0}
或
a[title="1213"]{color:#ff0}
像上面用中括号的是“属性选择符”
如下面的：
<a
href="#">这里不显示颜色</a>
<a
href="#"
title="567">这里的颜色为#0f0</a>
<a
href="#"
title="1213">这里的颜色为#ff0</a>
body+p{color:#f00}/*相邻选择符*/
<body>
<p>这里显示的颜色为#f00</p>
<div><p>这里显示的颜色为浏览器默认颜色</p></div>
</body>
其它的一般的选择符就不说了。
