：n番目の子（）疑似クラスは、リスト

Question

に動作していない私は、モバイルメニューを作ってるんだけど：n番目の子疑似クラスは、ここで に動作していないHTMLです：

<div id="mobilemenu" class="mobilemenu"> 
      <ul> 
       <a href="#"><li class="menuelement">Home</li></a> 
       <a href="#"><li class="menuelement">O Mnie</li></a> 
       <a href="#"><li class="menuelement">Kontakt</li></a> 
       <a href="#"><li class="menuelement">Oferta</li></a> 
      </ul> 
</div> 

そして、ここにスタイラスからCSS：

.menuelement 
     width 100% 
     height 20px 
     color #fbfbfb 
     border 1px solid #DA2825 
     padding 15px 0 15px 0 
    .menuelement:nth-child(1) 
     border-bottom 0 
     border-left 0 
     border-right 0 
    .menuelement:nth-child(2) 
     border-left 0 
     border-right 0 
     border-bottom 0 
    .menuelement:nth-child(3) 
     border-left 0 
     border-right 0 
     border-bottom 0 
    .menuelement:nth-child(4) 
     border-left 0 
     border-right 0 
     border-bottom 0 

最初の子に変更を適用すると、最初の子ではなくすべての子に適用されます。

Answer 1

：n番目の子（）擬似クラスは

あなたのHTMLが間違っているリストに取り組んでいます。 <UL><li>を含むようにして<li>が<a>

ではなく、あなたのCSSについて確認を含めることができますが、それはこれらの{およびそれら}のいくつかのいくつかを持っている必要があり、文の最後に真ん中と;で:をしたい必要があります。

.menuelement a { 
 
    color: inherit; 
 
} 
 
.menuelement { 
 
    color: purpleblue; 
 
} 
 
.menuelement:nth-child(1) { 
 
    color: fuchsia; 
 
} 
 
.menuelement:nth-child(2) { 
 
    color: orange; 
 
} 
 
.menuelement:nth-child(3) { 
 
    color: green; 
 
} 
 
.menuelement:nth-child(4) { 
 
    color: red; 
 
}

<div id="mobilemenu" class="mobilemenu"> 
 
     <ul> 
 
      <li class="menuelement"><a href="#">Home</a></li> 
 
      <li class="menuelement"><a href="#">O Mnie</a></li> 
 
      <li class="menuelement"><a href="#">Kontakt</a></li> 
 
      <li class="menuelement"><a href="#">Oferta</a></li> 
 
     </ul> 
 
    </div>

Answer 2

の答えの一つはあなたのために働くましたメニュー

<style type="text/css"> 
    .mobilemenu ul li{ 
     color: purpleblue; 
     width: 100%; 
     height: 20px; 
     border: 1px solid #DA2825; 
     padding: 15px 0 15px 0; 
     border-bottom: 0; 
     border-left: 0; 
     border-right: 0; 
    } 
    .mobilemenu ul li:nth-child(2) { 
     color: orange; 
    } 
    .mobilemenu ul li:nth-child(3) { 
     color: green; 
    } 
    .mobilemenu ul li:nth-child(4) { 
     color: red; 
    } 
    </style> 
    <div id="mobilemenu" class="mobilemenu"> 
      <ul> 
       <li class="menuelement"><a href="#">Home</a></li> 
       <li class="menuelement"><a href="#">O Mnie</a></li> 
       <li class="menuelement"><a href="#">Kontakt</a></li> 
       <li class="menuelement"><a href="#">Oferta</a></li> 
      </ul> 
    </div>