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元素