Question

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

我见过很多，其中大多数都有＆gt;选择器，

我的问题是：

如何使用＆gt;制作CSS下拉菜单选择？

我看了很多教程，但从未理解＆gt;它是如何以及如何与HTML类\ Ids连接。

有人可以解释一下吗？谢谢。

Answer 1

用于选择直接孩子。

考虑以下标记

<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的选择器仅定位uls div的{{1}}，其ID为container。

例如，它不会定位ul，它是第一个li的孩子。

因此，使用儿童组合器会带来性能上的好处。

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

Answer 3

＆gt; CSS中的运算符意味着以下表达式必须是直接子项。

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

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

Answer 4

请参阅this >是子选择器。而不是引用所有后代，我们只想解决直接的后代。将其视为只想选择孩子，而不是选择大孩子或其他任何孩子。

CSS下拉解释

4 个答案: