針對來自父母UL LI列表中的另一個UL LI列表

由於某種原因，我不能從我以前的UL LI列表中定位我的子項目符號。我附上了我正在努力完成的一張照片。針對來自父母UL LI列表中的另一個UL LI列表

這裏是HMTL和CSS標記：

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<style type="text/css"> 
* { 
    font-family: Segoe UI; 
    font-size: 9pt; 
} 
ul.docs { 
    list-style-type: none; 

    border-left: 1px solid #000; 

    margin-top: 0; 
    margin-bottom: 0; 
    margin-right: 0; 
    margin-left: 10px; 

    padding-left: 5px; 
} 
ul.docs:hover { 
    cursor: pointer; 
} 
ul.docs > li { 
    text-indent: -5px; 
} 
ul.docs > li:before { 
    content: "–"; 
    color: #000; 
    padding-right: 5px; 
} 
span.docicon:before { 
    content: url("book library_24x24.png"); 
} 
#doc_input { 
    border: 1px solid #000; 
} 

span.docicon:before { 
    content: url("book library_24x24.png"); 
} 

#add_doc:before { 
    content: url("add_16x16.png"); 
} 

.folder { 
    background: url(folder_16x16.png) no-repeat center left; 
    padding-left: 20px; 
} 

div.folder > li > ul > li:before { 
    content: "–"; 
} 


</style> 

<script type="text/javascript"> 

</script> 

</head> 

<body> 

    <div id="wrapper"> 

     <div style="float: left; margin-right: 10px;"> 
      <div><input id="doc_input" type="text"></div> 
      <span class="docicon"><b>ABC-2016-123456</b></span> 
      <ul class="docs"> 
       <li>documentA</li> 
       <li>documentB</li> 
       <li>documentC</li> 

       <div class="folder"><li>MAIN FOLDER</li></div> 
       <ul> 
        <li>document1</li> 
        <li>document2</li> 
       </ul> 

      </ul> 
     </div> 
     <div><b><u>Actions</u></b><br> 
      <span id="add_doc">Add</div> 
     </div> 

    </div> 

</body> 

</html>

來源

2016-01-26 BobbyJones

你的CSS不排隊。你打電話給那些不存在直接孩子的選擇器。另外，div不能是ul的直接子節點。只有列表項可以存在於ul內。 – i7nvd

而不是具有 'UL' 改變它的內部的 '格'，所以它看起來是這樣的：

<ul class="docs"> 
    <li>documentA</li> 
    <li>documentB</li> 
    <li>documentC</li> 
    <li> 
     <span class="folder">Main Folder</span> 
     <ul> 
     <li>document1</li> 
     <li>document2</li> 
     </ul> 
    </li> 
</ul>

將您的款式替換爲這些選擇器中的子文件夾

ul.docs {} 
ul.docs li {} 
ul.docs li span {} <-- add the folder icon style here 
ul.docs li ul {} 
ul.docs li ul li {} <-- for the subfolders. This is what you're looking for

來源

2016-01-26 18:40:27

針對來自父母UL LI列表中的另一個UL LI列表

回答

相關問題