CSS选择器div和p的用法和区别
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS选择器div和p的⽤法和区别div,p、div p、div>p、div+p、div~p、div.a的⽤法和区别
div,p：选择所有<div>元素和<p>元素
<style>
p,span{font-size:24px}
</style>
<div>Hello World</div>
<p>Hello</p>
<p>World</p>
这个例⼦中<div>和<p>元素的字体⼤⼩都是24px
div span：选择<div>元素内部所有的<span>元素，包括⼦标签元素和孙⼦辈标签元素
<style>
div span{font-size:24px}
</style>
<div>
<p>
<span>Hello</span>
</p>
<span>World</span>
</div>
这个例⼦中<div>内部所有的<span>元素的字体⼤⼩都是24px
div>span：选择<div>元素内部所有的<span>元素，不包括孙⼦辈标签元素
<style>
div>span{font-size:24px}
</style>
<div>
<p>
<span>Hello</span>
</p>
<span>World</span>
</div>
这个例⼦中只有World的字体⼤⼩是24px
div+p：选择紧接在 <div> 元素之后的 <p> 元素
<style>
div+p{font-size:24px}
</style>
<div>Hello</div>
<p>World</p>
这个例⼦中只有World的字体⼤⼩是24px
div~p：选择<div>元素之后所有的<p>元素
<style>
div~span{font-size:24px}
</style>
<div>我是div</div>
<p>Hello</p>
<p>World</p>
这个例⼦中<p>元素的字体⼤⼩都是24px
div.a：选择<div>元素class=a的元素
<style>
div.a{font-size:24px}
</style>
<div class="a">hello world</div>
这个例⼦中hello world字体⼤⼩是24px。