html - :nth-child() pseudoclass isn't working in list

Question

我正在制作移动菜单，但是 :nth-child 伪类不工作这是 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

当我将更改应用于第一个 child 时，它会应用于每个 child 而不是第一个 child 。

Answer 1

:nth-child() 伪类在列表中工作

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