これは私が知っている基本ですが、これを解決できないようです。これはコードです(スニペット)
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
編集:やった!投票したり自分に報酬を与える方法はありますか? 誰も答えてくれないのに自分で問題を解決するのはこれで 3 回目です :) 冗談です。コミュニティ精神の問題は、クラス.sub_folder
が親の中に#storage_list
あり、サブのルール<li>
が設定されていたため、すべて<li>
(別の の中にあるかどうかに関係なく) も同じスタイルを取得していたことです。>
解決策は、親のみ<li>
が特定のクラスを取得し、子、孫などは取得しないように使用することでした.したがって、ルール(例)は次のようになりますul#storage_list > li.dir > span.name