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