一段神奇的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)。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步