CSS選擇器（菜單UL LI）或（菜單裏）

這是更好地使用CSS選擇器（菜單UL LI）或（菜單裏）

.menu{ 
    float:left; 
    width:600px; 
    height:25px; 
    background:url(bg.png) repeat-x; 

} 
.menu ul{ 
    float:left; 
} 
.menu ul li{ 
    float:left; 
    width:150px; 
    height:25px; 
    background:#F00; 
}

或

.menu{ 
    float:left; 
    width:600px; 
    height:25px; 
    background:url(bg.png) repeat-x; 

} 
.menu ul{ 
    float:left; 
} 
.menu li{ 
    float:left; 
    width:150px; 
    height:25px; 
    background:#F00; 
}

這標籤是正確menu ul li或menu li？

來源

2010-06-28 Kali Charan Rajput

當你說which tag is right menu ul li or menu li?，你是在說一個與class="menu"格或你在談論deprecated menu tag（<menu>）？

如果你只是在談論你的CSS代碼，那些不是標籤，它們是選擇器。而且我要提供最具體的選擇去，以避免意外分配

.menu > ul > li{ 
    // this matches only list items directly inside a ul directly inside a .menu 
}

更妙的是這樣的：

#menu > ul > li{ 
    // now you are referencing the menu by id, so you know this is a unique assignment 
}

，或者如果你有多個菜單：

#menubar > .menu > ul > li{ 
}

因爲否則你是在驚喜，你可能實際上有這樣的結構：（這是醜陋的，我知道，但只是爲了證明一點）

<div class="menu"> 
    <ul> 
     <li>Menu Item 1</li> 
     <li>Menu Item 2</li> 
     <li>Menu Item 3 
     <ul> 
      <li id="abc">Menu Item abc</li> 
     </ul> 
     </li> 
     <li>Menu Item 4 
     <div><div><div><ol><li><div><ul> 
       <li id="xyz">Menu Item xyz</li> 
     </ul></div></li></ol></div></div></div> 
     </li> 
    </ul> 
</div>

（您可能不想匹配項目abc或xyz）。

來源

2010-06-28 13:39:46

我也要評論嵌套列表。這絕對是最好的方式。 – theorise 2010-06-28 13:57:00

只是一個說明。 *

*不再被棄用。它已被複活用於HTML5。 :) – 2011-03-28 14:06:33

@ J.T.S。很高興知道，但在我寫這篇文章之前我從來沒有聽說過它（我只是自己搜索了一下:-)） – 2011-03-28 14:40:34