我在HTML和Css下面，我想将所有嵌套的li的内容（anchor标记）添加到一些动态的padding-left中，每个嵌套的li的.sid类应具有1.5rem *其嵌套深度，
ex:
First nested li a {padding-left:1rem}
next nested li a {padding-left:2rem}
next nested li a {padding-left:3rem}
..................... 4rem
我想将其添加到N个嵌套的李氏中
可以通过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;
}
.group-item .sid {
padding-left:1rem; // this is effecting only one level so this is not correct
} <!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>也许这是您的解决方案。
虽然不确定我是否正确理解了您的问题。
ul { list-style: none; padding: 0; margin:0 }
li { margin:0; padding: 0; cursor:pointer}
li a {display: block;}
li a:hover {
background:green;
}
.item {
margin-left:1rem; // giving the item div a margin
}
.group-item{
padding-left:1rem; // on which further group item divs can add up to
} <!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 -> item -->
<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>