我如何/我可以遞歸縮進div的一個類？

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或類與編號爲跨瀏覽器兼容）

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

這將顯示，並在所有div的父DIV中與ID div1的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; 
} 

U可以這樣，將「填充左」的「利潤率左」，這是ü老闆;-)