3

有人可以解释一下 CSS 下拉菜单是如何工作的吗？

我见过很多，其中大多数都有 > 选择器，

我的问题是：

如何使用 > 选择器制作 CSS 下拉菜单？

我查看了很多教程，但从未理解 > 的作用以及它如何与 HTML 类\Ids 连接。

有人可以部分解释我吗？谢谢你。

4

4 回答 4

6

它用于选择直接子代。

考虑跟随标记

<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>

的选择器#container > ul只会针对id 为 的uls直接子代。divcontainer

例如，它不会针对ul作为 first 的子级的li。

出于这个原因，使用子组合器有性能优势。

于 2012-09-14T11:46:51.470 回答
2

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/

于 2012-09-14T12:04:07.417 回答
0

CSS 中的 > 运算符意味着后面的表达式必须是直接子表达式。

例如，div span匹配作为 DIV 元素后代的 SPAN 元素，但div > span仅匹配作为 DIV 的直接子元素的 SPAN 元素。

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

于 2012-09-14T11:46:58.550 回答
0

看到这是>一个子选择器。我们不想引用所有后代，而是只处理直接后代。将其视为只想选择孩子而不是孙子女或任何其他人。

于 2012-09-14T11:59:41.163 回答