1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 /* 8 为span后的一个p元素设置一个背景颜色 9 1.后一个兄弟元素选择器 10 作用： 11 可以选中一个元素后紧挨着的指定的兄弟元素 12 语法： 13 前一个+后一个 14 2.选中后边的所有兄弟元素 15 语法： 16 前一个~后一个 17 */ 18 span+p{ 19 background-color:yellow; 20 } 21 span~p{ 22 background-color:green; 23 } 24 </style> 25 </head> 26 <body> 27 <p>123</p> 28 <p>123</p> 29 <span>123</span> 30 <p>123</p> 31 <p>123</p> 32 </body> 33 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 /* 8 9 否定伪类： 10 作用： 11 可以从已选中的元素中剔除某些元素 12 语法： 13 :not(选择器) 14 15 为所有的p元素设置一个背景颜色为黄色，除了class值为hello 16 */ 17 p:not(.hello){ 18 background-color:yellow ; 19 } 20 </style> 21 </head> 22 <body> 23 <p>123</p> 24 <p>123</p> 25 <span>123</span> 26 <p class="hello">123</p> 27 <p>123</p> 28 </body> 29 </html>