Question

我正在查看遵循此模式的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>

我希望缩进内部div的内容，而不更改其类，以便显示页面：

contents
  other contents
    yet even more contents

通过操纵'someclass'这可行吗？如果是这样，怎么样？

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

Answer 1

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

.someclass { margin-left: 10px; }

对于第一个项目没有缩进

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

Answer 2

我不确定这是否属于您之后，但您可以执行以下操作：

（旁注：你应该避免使用数字来启动id或类来兼容crossbrowser）

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

这将在ID为div1的父div内的所有div上显示和缩进20px。

请参阅此fiddle。

Answer 3

你可以这样做，但它需要创建一个容器来覆盖它，并给它一个特殊的ID，如下所示：

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

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

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

HTML

<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;
}

你可以这样，用“margin-left”替换“padding-left”，这是你的老板; - ）

我怎么能/我可以递归地用一个类缩进div？

3 个答案: