：第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

添加此下面的CSS代码菜单

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