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