CSS classes overlapping?
this is the basics I know, but I can't seem to solve this. this is the code (snippet)
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>
it happens that ALL the <li> (whatever the class of the li) inside <ul class="sub_folder"> get the same style as <li class="dir"> inside <ul id="storage_list"> ... they all get the .dir class.
Why?
EDIT: I did it! Is there a way to vote or reward myself? It's the third time I solve my own problems when nobody answers :) Kid开发者_Go百科ding.
For community spirit the problem was that since the class .sub_folder was inside the parent #storage_list and a rule for the the sub <li> was set, all the <li> (no matter if inside another ) were getting the same styles also. The solution was to use > so that ONLY the parent <li> will get the specific class and not the children, grandchildren etc..
So the rule (example) becomes ul#storage_list > li.dir > span.name
Try this:
ul#storage_list > li.dir > span.name
{
margin-left:5px;
background:url("/larea/site_images/folder.png") left no-repeat;
padding-left: 20px;
}
加载中,请稍侯......
精彩评论