将大于 ('>' ) 选择器更改为 ul li 标签中的简单 css 类

Question

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

这个 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 作为父级且具有 .menu 类作为父级的 li。

希望对您有所帮助。