CSS3練習之通用兄弟選擇器、偽元素選擇器
阿新 • • 發佈：2018-12-26
點選按鈕出現各圖片：
<!doctype html> <html> <head> <title>Demo</title> <meta charset="utf-8"> <style> .clear:after{ content:""; display:block; clear:both; } #dl a{ width:100px; height:20px; border:1px solid #000; background-color:#CACAC9; float:left; margin:10px; } #d2{ width:600px; height:600px; border:1px solid #ddd; margin-left:10px; } #d2 img{ display:none; } #d2 #img01:target,#d2 #img02:target,#d2 #img03:target,#d2 #img04:target{ display:block; margin:125px auto; } </style> </head> <body> <div id="dl" class="clear"> <a href="#img01">img1</a> <a href="#img02">img2</a> <a href="#img03">img3</a> <a href="#img04">img4</a> </div> <div id="d2"> <img src="images/p001.jpg" id="img01"> <img src="images/p002.jpg" id="img02"> <img src="images/p003.jpg" id="img03"> <img src="images/p004.jpg" id="img04"> </div> </body> </html>