CSS 子元素选择器_html/css_WEB-ITnose

<style type="text/css">  div > p { color: red; }</style><div>    <p>        p1    </p>        <p>        <p>            p2        </p>    </p></div>

既然是子元素，为什么 p2 也变了颜色呢？

一开始以为是继承，后来用 style="color: red; " 试了一下，下面 p 不会继承这个样式。

求解啊，谢谢了！

回复讨论(解决方案)

这就是所谓的标签嵌套规范，你可以通过开发者人员工具，查看页面解析，虽然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