<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>美观的纯 CSS 折叠列表</title><style>body {font-family: Arial, sans-serif;}ul {list-style-type: none;/* 去掉默认列表样式 */padding: 0;/* 去掉内边距 */}li {margin: 5px 0;position: relative;/* 为箭头定位 */padding-left: 25px;/* 给箭头留出空间 */}input[type="checkbox"] {display: none;/* 隐藏复选框 */}label {cursor: pointer;/* 鼠标指针变为手型 */position: relative;/* 让伪元素相对定位 */padding-left: 15px;/* 文字与箭头的间距 */}/* 使用伪元素绘制箭头 */label:before {content: "";position: absolute;left: 0;top: 50%;transform: translateY(-50%) rotate(-45deg);width: 4px;height: 4px;border: solid black;border-width: 0 2px 2px 0;display: inline-block;transition: transform 0.2s;}input[type="checkbox"]:checked+label:before {transform: translateY(-50%) rotate(46deg);/* 展开时旋转箭头 */}.children {display: none;/* 默认隐藏子元素 */padding-left: 15px;/* 子级项缩进 */}input[type="checkbox"]:checked~.children {display: block;/* 展开时显示子元素 */}</style>
</head><body><h1>美观的纯 CSS 折叠列表</h1><ul><li><input type="checkbox" id="parent1"><label for="parent1">父级 1</label><ul class="children"><li><input type="checkbox" id="child1-1"><label for="child1-1">子级 1-1</label><ul class="children"><li>子级 1-1-1</li><li>子级 1-1-2</li></ul></li><li><input type="checkbox" id="child1-2"><label for="child1-2">子级 1-2</label><ul class="children"><li>子级 1-2-1</li><li>子级 1-2-2</li></ul></li></ul></li><li><input type="checkbox" id="parent2"><label for="parent2">父级 2</label><ul class="children"><li><input type="checkbox" id="child2-1"><label for="child2-1">子级 2-1</label></li><li><input type="checkbox" id="child2-2"><label for="child2-2">子级 2-2</label></li></ul></li></ul></body></html>
