这是我所知道的基础知识,但我似乎无法解决这个问题。这是代码(片段)
ul#storage_list, ul.sub_folder{
margin:0;
padding:0;
list-style:none;
font-size: 12px;
}
ul#storage_list li{
margin:0;
line-height: 20px;
display:block;
cursor:pointer;
}
ul#storage_list li.file span.name{
background:url("/larea/site_images/file.png") left no-repeat;
padding-left: 20px;
}
ul#storage_list li.dir span.name{
margin-left:5px;
background:url("/larea/site_images/folder.png") left no-repeat;
padding-left: 20px;
}
ul#storage_list li.dir span.pin{
background:url("/larea/site_images/folder_arrow.png") left no-repeat #fff;
width:10px;
height: 10px;
display: inline-block;
}
ul.sub_folder{
margin-left:15px;
padding:0;
list-style:none;
font-size: 12px;
}
ul.sub_folder li{
margin:0;
line-height: 20px;
display:block;
cursor:pointer;
}
ul.sub_folder li.file span.name{
background:url("/larea/site_images/file.png") left no-repeat;
padding-left: 20px;
}
ul.sub_folder li.dir span.name{
margin-left:5px;
background:url("/larea/site_images/folder.png") left no-repeat;
padding-left: 20px;
}
ul.sub_folder li.dir span.pin{
background:url("/larea/site_images/folder_arrow.png") left no-repeat;
width:10px;
height: 10px;
display: inline-block;
}
</style>
</head>
<body>
<ul id="storage_list">
<li class="dir"><span class="pin"></span><span class="name">omg</span>
<ul class="sub_folder">
<li class="dir"><span class="pin"></span><span class="name">omg</span></li>
<li class="file"><span class="pin"></span><span class="name">omg2</span></li>
</ul>
</li>
<li class="file"><span class="pin"></span><span class="name">omg2</span></li>
</ul>
碰巧里面的所有<li>
(无论 li 的类是什么)都与里面的<ul class="sub_folder">
样式相同……他们都得到了类。为什么?<li class="dir">
<ul id="storage_list">
.dir
编辑:我做到了!有没有办法投票或奖励自己?这是我第三次在没有人回答的情况下解决自己的问题 :) 开玩笑。对于社区精神,问题在于,由于类.sub_folder
在父类内部#storage_list
并且设置了子类的规则<li>
,所有<li>
(无论是否在另一个内部)也都获得了相同的样式。解决方案是使用>
这样只有父母<li>
才能获得特定的班级,而不是孩子,孙辈等。所以规则(示例)变为ul#storage_list > li.dir > span.name