<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 class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2663" title="靠岸学术"><img
src="https://img.php.cn/upload/ai_manual/001/503/042/69b3bf2c510bf638.jpeg" alt="靠岸学术" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2663" title="靠岸学术">靠岸学术</a>
<p>一款集翻译,阅读,文献管理于一体的英文文献阅读器</p>
</div>
<a href="/ai/2663" title="靠岸学术" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</p> <div> <p>p3</p> </div></div>
div p{}//这种才是,div下,所有的后代元素。//可以理解为,包括儿子辈,孙子辈,重孙辈。。一直到底div > p{}//这种是直接子元素。//可以理解为,这个只选择儿子辈的p元素 http://www.w3school.com.cn/css/css_selector_child.asp










