css樣式選擇器

 

寫法	含義	例子	結果
div p	選中div內所有p標籤（包括孫元素） 標籤內，所有	<style> div p{   color:red; } </style> <div>   <p>子元素</p>   <span><p>孫元素</p></span> </div>	子元素 孫元素
div>p	選中div內所有子標籤p（不包括孫元素） 標籤內，所有子	<style> div>p{   color:red; } </style> <div>   <p>子元素</p>   <span><p>孫元素</p></span> </div>	子元素 孫元素
div+p	選中div後面的一個p元素 後面一個，同級	<style> div+p{   color:red; } </style> <p>相鄰元素p</p> <div>   <p>子元素</p> </div> <div>相鄰元素div</div> <p>相鄰元素</p>	相鄰元素p 子元素 相鄰元素div 相鄰元素p
div ~ p	選中div後面的所有同級p元素 後面，同級	<style> div ~ p{   color:red; } </style> <p>相鄰元素</p> <div><p>子元素</p></div> <p>相鄰元素</p> <p>相鄰元素</p>	相鄰元素 子元素 相鄰元素 相鄰元素
div.a	選中class爲a的div	<style> div.a{   color:red; } </style> <div class="a">div元素</div>	div元素
div,p	所有div元素和p元素	<style> div.a{   color:red; } </style> <div>     <p>p元素</p>   </div>  <div>     <span>       <p>p元素</p>     </span>  </div>	p元素 p元素