ul li最初の子をすべて削除せずにul li最初の子を削除するにはどうすればよいですか？

Question

私は、私のワードプレスのウェブサイトメニューのための2レベルの深いulシステムを持っています。

トップレベルulの最初のliである「home」メニュー項目を削除します。

私は次のような場合：

.menu-header ul li:first-child{ 
    display: none; 
} 

そして、それはトップレベルのULの最初のLi、だけでなく、セカンドレベルのメニューのすべての最初のLiを削除します。

だから私はこの試みた：

.menu-header ul > li:first-child{ 
display: none; 
} 

をしかし、それは効果がありませんか？私はこれが子セレクタのためのものだと思った？

私は次の行を追加する場合、私は私が欲しいものを得る：

.menu-header ul ul li:first-child{ 
display: block; 
} 

セカンドレベルULからすべての最初のLiに戻します。

しかし、この最後の余分なコードに頼らずに、私はこれを1行で行うことができますか？

Answer 1

あなたは正しい軌道に乗っていたが、あなたはそうのような子ul要素のため>子セレクタを使用したい：だから近い

.menu-header > ul > li:first-child { 
 
    display: none; 
 
}

<div class="menu-header"> 
 
    <ul> 
 
    <li>Home</li> 
 
    <li>Page 
 
     <ul> 
 
     <li>Test</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>