出于某种原因，我无法从之前的 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>
最佳答案
不要将“div”放在“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
关于html - 将父 UL LI 列表中的另一个 UL LI 列表作为目标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35021068/