CSS類重疊？

這是我知道的基本知識，但我似乎無法解決這個問題。這是代碼（段）CSS類重疊？

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>（無論類裏的）內部<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

來源

2011-06-05 Sandro Antonucci

有你驗證您的HTML檢查任何嵌套問題？你可以發佈嗎？ – 2011-06-05 19:14:37

html和css驗證 – 2011-06-05 19:27:16

解決:)看到上面的編輯 – 2011-06-05 20:03:48

試試這個：

ul#storage_list > li.dir > span.name 
{ 
    margin-left:5px; 
    background:url("/larea/site_images/folder.png") left no-repeat; 
    padding-left: 20px; 
}

來源

2011-08-04 09:10:31 Callam

回答

相關問題