Maison  >  Article  >  interface Web  >  CSS 子元素选择器_html/css_WEB-ITnose

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

WBOY
WBOYoriginal
2016-06-21 09:29:151144parcourir

 <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

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn