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

WBOY
Freigeben: 2016-06-21 09:29:15
Original
1143 Leute haben es durchsucht

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


既然是子元素,为什么 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>
Nach dem Login kopieren

div p{}//这种才是,div下,所有的后代元素。//可以理解为,包括儿子辈,孙子辈,重孙辈。。一直到底div > p{}//这种是直接子元素。//可以理解为,这个只选择儿子辈的p元素
Nach dem Login kopieren

http://www.w3school.com.cn/css/css_selector_child.asp

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage