：nth-​​child（）伪类不在列表中工作

Question

我正在制作移动菜单但是：n-child pseudoclass还没有工作 这是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

：nth-​​child（）伪类正在列表中

你的HTML错了。 <UL>需要包含<li>而<li>可以包含<a>

并且不确定您的CSS，但是应该包含其中一些{，其中一些}和语句需要:位于中间，;位于端。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

在菜单

下面添加以下css代码

                     (n2) -> (n3)-> (n9)
                      /\
                      |
   (n4)<-(n1)->(n5)->(n6)
    |            |
    \/           \/ 
    (n7)         (n8)