<style type="text/css"> div > p { color: red; }</style><div> <p> p1 </p> <p> <p> p2 </p> </p></div>
这就是所谓的标签嵌套规范,你可以通过开发者人员工具,查看页面解析,虽然p包含在内,但是,最终解析还是属于 div的直接子集
如下实例是正常的
<style type="text/css"> .test>p { color: red; }</style> <div class="test"> <p>p1</p> <p>p2</p> <div> <p>p3</p> </div></div>
div p{}//这种才是,div下,所有的后代元素。//可以理解为,包括儿子辈,孙子辈,重孙辈。。一直到底div > p{}//这种是直接子元素。//可以理解为,这个只选择儿子辈的p元素
http://www.w3school.com.cn/css/css_selector_child.asp