一段神奇的CSS
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>css</title> 5 <style type="text/css"> 6 div { 7 width: 100px; 8 height: 100px; 9 border: 1px solid #000; 10 padding: 20px; 11 } 12 13 #a { 14 background: #eee; 15 } 16 17 #b { 18 background: #ccc; 19 margin-top: 20px; 20 } 21 22 #a:hover + #b { 23 background: #f00; 24 } 25 </style> 26 </head> 27 28 <body> 29 <div id="a">hover here</div> 30 <div id="b">see me</div> 31 </body> 32 </html>
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。