CSS下拉說明

Question

有人可以解釋我如何CSS下降作品？

我見過很多人，他們大多具有>選擇，

我的問題是：

你如何讓CSS下拉菜單與>選擇？

我看了很多教程，並從未理解>>它是怎麼做的，它如何與HTML類\ ID連接。

有人可以解釋我說，一部分？ 謝謝。

Answer 1

HTML：

<ul class="menu"> 
    <li>   
     <span>menu 1</span> 
     <ul> 
      <li><a href="#" >Sub 1-1</a></li> 
      <li><a href="#" >Sub 1-2</a></li> 
      <li><a href="#" >Sub 1-3</a></li> 
     </ul> 
    </li> 
    <li>   
     <span>menu 2</span> 
     <ul> 
      <li><a href="#" >Sub 2-1</a></li> 
      <li><a href="#" >Sub 2-2</a></li> 
      <li><a href="#" >Sub 2-3</a></li> 
     </ul> 
    </li> 
</ul> 

CSS：

ul.menu>li{ /*Only direct children*/ 
    float:left; 
    width: 60px; 
} 
ul.menu li ul{ 
    display:none; /*not visible*/ 
} 

ul.menu li:hover ul{ 
    display:block; /* visible when hovering the parent li */ 
} 

說明是在CSS。

演示：
http://jsfiddle.net/FH7Z3/

Answer 2

它用於選擇直接的孩子。

考慮下面的標記

<div id="container"> 
    <ul> 
     <li> List Item 
     <ul> 
      <li> Child </li> 
     </ul> 
     </li> 
     <li> List Item </li> 
     <li> List Item </li> 
     <li> List Item </li> 
    </ul> 
</div> 

的選擇器將只針對uls這是與container一個id的div的直接孩子。

它不會針對，例如，ul是第一個li的孩子。

因此，使用子組合器會帶來性能優勢。

Answer 3

CSS中的>運算符表示以下表達式必須是直接子對象。

例如，div span與作爲DIV元素的後代的SPAN元素相匹配，但div > span僅匹配作爲DIV的直接子元素的SPAN元素。

http://www.w3schools.com/cssref/sel_element_gt.asp

Answer 4

看到this的>是一個子選擇。我們不想引用所有的後代，而只想解決直接後代。查看它只想選擇孩子，但不選擇大孩子或其他人。