使用CSS3偽類選擇器實現簡單手風琴效果，與其功能的介紹
阿新 • • 發佈：2018-12-22
1.展示
2.原理
主要使用了C3選擇器中的兩個：
①：不（）：不包含，如DIV：否（。測試），就是DIV中選中不包含有試驗類的，例如可以配合E：否（：最後的型）來排除掉最後一個元素並選中剩餘的;
②：目標：目標的ID變為的location.hash的值時，也就是錨點選中它時選中它的選擇器，例如錨點可以通過標籤的HREF里加＃來改變。
3.測試時遇到兩點需要注意的問題
①給元素設定ID時不能用單個的字母，不然錨點錨不上;
②想給效果加上過渡持續時間時發現，目前顯示等屬性不受支援。因為是基於數值和時間的計算（長度，百分比，角度，顏色也能轉換為數值）。
4.原始碼
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>C3手風琴效果</title> <style type="text/css"> :root, body, * { margin: 0; padding: 0; list-style: none; user-select: none; font-size: 24px; text-align: center; text-decoration: none; } .wrapper { margin: 10px auto; width: 300px; height: 400px; border: 2px solid lightblue; background-color: beige; } a:not([id]) { display: block; color: rgb(0, 172, 202); width: 100%; margin-top: 3px; background-color: rgb(109, 255, 206); border-radius: 10px; cursor: pointer; transition-duration: 0.3s; } a:hover { border: 1px solid transparent; } a:active { border: 2px solid transparent; } li { margin: 2px auto; width: 85%; font-size: 16px; background-color: rgb(115, 206, 241); } ul:not(:target) { display: none; } div:not([class]) { color: rgb(0, 89, 255); font-size: 30px; font-weight: 600; } </style> </head> <body> <div class="wrapper"> <a href="#" id="miao">手風琴</a> <a href="#aaa">AAA</a> <ul id="aaa"> <li>帥</li> <li>帥帥帥</li> <li>帥帥帥帥帥</li> </ul> <a href="#bbb">BBB</a> <ul id="bbb"> <li>酷</li> <li>酷酷酷</li> <li>酷酷酷酷酷</li> </ul> <a href="#ccc">CCC</a> <ul id="ccc"> <li>美</li> <li>美美美</li> <li>美美美美美</li> </ul> <a href="#ddd">DDD</a> <ul id="ddd"> <li>身體好</li> <li>身體好</li> <li>身體好</li> </ul> </div> <script src="./js/test.js"></script> </body> </html>