我想将所有嵌套的 li 的内容(锚标签(添加到一些动态左填充，
现在使用 Css，我可以添加这样的东西来实现，但这看起来像是硬编码，
.container ul li a {padding-left:1rem}
.container ul ul li a {padding-left:2rem}
.container ul ul ul li a {padding-left:3rem}
.container ul ul ul ul li a {padding-left:4rem}
每个嵌套的 Li 的 .sid 类应该有 1rem * 它的嵌套深度，
我想把它添加到N个嵌套的li中
这可以通过CSS完成吗？我在想只有JS是这里的最终解决方案？
ul { list-style: none; padding: 0; margin:0 }
li { margin:0; padding: 0; cursor:pointer}
li a {display: block;}
li a:hover {
background:green;
}
.container ul li a {padding-left:1rem}
.container ul ul li a {padding-left:2rem}
.container ul ul ul li a {padding-left:3rem}
.container ul ul ul ul li a {padding-left:4rem}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<ul class="parent" id="Head">
<li class="items"><a class="sid"><span>A</span></a></li>
<li class="item">
<div class="group"><a class="sid"><span>B</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>b</span></a></li>
<li class="items"><a class="sid"><span>b</span></a></li>
</ul>
</li>
<li class="item">
<div class="group"><a class="sid"><span>C</span></a></div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c</span></a></li>
<li class="items"><a class="sid"><span>c</span></a></li>
<li class="item">
<div class="group"> <a class="sid"><span>c</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c1</span></a></li>
<li class="items"><a class="sid"><span>c1</span></a></li>
<li class="item">
<div class="group"> <a class="sid"><span>c1</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c2</span></a></li>
<li class="items"><a class="sid"><span>c2</span></a></li>
<li class="items"><a class="sid"><span>c2</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>
</body>
</html>这应该是你的解决方案。
我想我现在明白你的问题了。 "sid"类彼此之间没有关系，这就是为什么它们不加起来的原因。您需要创建子类。我希望这在您的情况下是可能的，否则我建议使用 jQuery。
ul { list-style: none; padding: 0; margin:0 }
li { margin:0; padding: 0; cursor:pointer}
li a {display: block;}
li a:hover {
background:green;
}
.group-item .sid {
padding-left: 1rem;
}
.sub-group-item .sid {
padding-left: 2rem;
}
.sub2-group-item .sid {
padding-left: 3rem;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<ul class="parent" id="Head">
<li class="item"><a class="sid"><span>A</span></a></li>
<li class="item">
<div class="group"><a class="sid"><span>B</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>b</span></a></li>
<li class="items"><a class="sid"><span>b</span></a></li>
</ul>
</li>
<li class="item">
<div class="group"><a class="sid"><span>C</span></a></div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c</span></a></li>
<li class="items"><a class="sid"><span>c</span></a></li>
<li class="item">
<div class="group"> <a class="sid"><span>c</span></a> </div>
<ul class="sub-group-item">
<li class="items"><a class="sid"><span>c1</span></a></li>
<li class="items"><a class="sid"><span>c1</span></a></li>
<li class="item">
<div class="group"> <a class="sid"><span>c1</span></a> </div>
<ul class="sub2-group-item">
<li class="items"><a class="sid"><span>c2</span></a></li>
<li class="items"><a class="sid"><span>c2</span></a></li>
<li class="items"><a class="sid"><span>c2</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>
</body>
</html>