Question

我想将菜单中大于（'＆gt;'）的CSS选择器移到简单的CSS类中。大于（'＆gt;'）这个选择器对我来说有很多困惑，实际上我是网络编程的初学者，所以我不明白这个选择器是如何工作的。

这个CSS规则和html代码从任何地方抓取，所以我想换成类选择器。

    // css
     .menu>ul>li{
            float:left;
            font-size:13px;
            position:relative
        }


         .menu>ul>li:hover{
            background:#083b65; 
        }
        .menu>ul>li>a{
            height:38px;
            padding:13px 1px 13px 6px
        }


        .mobmenu ul li:hover{
            background:#083b65;
        }
        .mobmenu ul li{
            border-bottom: 1px solid white;
        }

        .mobmenu ul li a{
            padding:8px;
            white-space:nowrap;
            display:block; 
            width:100%
        } 

// html code

  <nav class="menu" > 
            <ul class="mobmenu"> 
                <li>
                    <a href="#">Beginner</a> 
                    <ul>
                        <li><a href="">  Web Programming for beginner  </a></li>  
                        <li><a href="">  java Programming for beginner   </a></li>    
                         <li><a href="">C# Programming for beginner      </a></li> 
                         <li><a href="">>.NET Programming for beginner   </a></li>
                         <li><a href=""> C++ Programming for beginner    </a></li>
                    </ul>
                </li>
                 <li>
                    <a href="#">intermediate</a> 
                    <ul >
                       <li><a href="">  Web Programming for intermediate  </a></li>  
                        <li><a href="">  java Programming for intermediate   </a></li>    
                         <li><a href="">C# Programming for intermediate      </a></li> 
                         <li><a href="">>.NET Programming for intermediate   </a></li>
                         <li><a href=""> C++ Programming for intermediate    </a></li>

                    </ul>
                </li>
                  <li>
                    <a href="#">Advance</a> 
                    <ul >
                       <li><a href="">  Web Programming for Advance  </a></li>  
                        <li><a href="">  java Programming for Advance   </a></li>    
                         <li><a href="">C# Programming for Advance      </a></li> 
                         <li><a href="">>.NET Programming for Advance   </a></li>
                         <li><a href=""> C++ Programming for Advance    </a></li>
                       <li><a href="">  Web Programming for Advance  </a></li>  
                        <li><a href="">  java Programming for Advance   </a></li>    
                         <li><a href="">C# Programming for Advance      </a></li> 
                         <li><a href="">>.NET Programming for Advance   </a></li>
                         <li><a href=""> C++ Programming for Advance    </a></li>

                    </ul>
                </li> 
            </ul>

        </nav>

Answer 1

他们是亲子关系。在你的第一个选择器（在顶部），.menu是ul的直接父级，ul是li的直接父级。

因此整个选择器将所有具有ul作为父级的li定位，该父级也具有.menu类作为父级。

希望有所帮助。

将大于（'＆gt;'）的选择器更改为ul li标签中的简单css类

1 个答案: