Css 如何递归缩进div'；她在上课吗？

我正在看一页html代码，它遵循以下模式：

<div id='1' class='someclass'>
  contents
  <div id='2' class='someclass'>
    other contents
    <div id='3' class='someclass'>
      yet even more contents
    </div>
  </div>
</div>

通过操纵“someclass”这是否可行？如果是，怎么做

---

请注意，div可能包含一些其他相当简单的html，例如标题、列表等。

我认为您正在寻找以下css规则

.someclass { margin-left: 10px; }

第一项上没有缩进

.someclass .someclass { margin-left: 10px; }

---

我不确定这是否是你想要的，但你可以做以下几点：

（旁注：为了实现交叉浏览器兼容性，应该避免使用数字启动id或类）

这将在id为

div1

的父div内的所有div上显示并缩进20px

---

请参见此图。

您可以这样做，但它需要创建一个容器来覆盖它，并为其提供一个特殊ID，如下所示：

#yourContainer div {
  padding-left:0px; 
}

#yourContainer div > div {
   padding-left:5px; 
}

#yourContainer div > div > div {
    padding-left:10px;
}

HTML

---

你可以这样，用“左边距”代替“左边距”，这是你的老板；-）

嗨，吉尔伯特！您的解决方案不符合我的目的-例如，如果我嵌套了15个div，该怎么办？对不起，但您的问题中没有精确的答案！这就是“递归”一词的意思；）

div#div1 div {
  margin-left:20px;
}

#yourContainer div {
  padding-left:0px; 
}

#yourContainer div > div {
   padding-left:5px; 
}

#yourContainer div > div > div {
    padding-left:10px;
}

<div id="yourContainer">
    <div id="1" class='someclass'>
      contents
      <div id="2" class='someclass'>
        other contents
        <div id="3" class='someclass'>
          yet even more contents
        </div>
      </div>
    </div>
</div>

#yourContainer .someclass {
  padding-left:0px; 
}

#yourContainer .someclass > .someclass {
   padding-left:5px; 
}

#yourContainer .someclass > .someclass > .someclass {
    padding-left:10px;
}