html - 具有不同样式 Css 的子菜单

Question

我被困住了。我想通过:nth-child. 因为我希望唯一的前 2 个 block( :nth-child(-n+2)) 有background:blue，但我变成了所有.submenu-third 有背景：蓝色。

如何仅为前两个块添加样式？

<nav>
                <ul class="topmenu">
                    <li>
                        <a href="" class="active">home</a>
                        <ul class="submenu">
                            <li><a href="">menu second level 1</a></li>
                            <li><a href="">menu second level 2</a>
                                
                                <ul class="submenu-third">
                                    <li><a href=""> 1 </a></li>
                                    <li><a href=""> 2 </a></li>
                                    <li><a href=""> 3 </a></li>
                                </ul>

                                
                            </li>
                            <li><a href="">menu second level 3</a></li>
                            <li><a href="">menu second level 4</a></li>

                            <li><a href="">menu second level 5</a>
                                <ul class="submenu-third">
                                    <li><a href=""> 5 third level</a></li>
                                    <li><a href=""> 5 third level</a></li>
                                    <li><a href=""> 5 third level</a></li>
                                </ul>
                            </li>

                            <li><a href="">menu second level 6</a></li>
                            <li><a href="">menu second level 7</a></li>

                            <li><a href="">menu second level 8</a>
                                <ul class="submenu-third">
                                    <li><a href="">8menu the third level</a></li>
                                    <li><a href="">8menu the third level</a></li>
                                    <li><a href="">8menu the third level</a></li>
                                </ul>
                            </li>
                            <li><a href="">menu second level 9</a></li>
                            <li><a href="">menu second level 10</a>
                                <ul class="submenu-third">
                                    <li><a href="">10menu the third level</a></li>
                                    <li><a href="">10menu the third level</a></li>
                                    <li><a href="">10menu the third level</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="">company</a></li>
                    <li><a href="">company</a></li>
                    <li><a href="">company</a></li>
                </ul>
            </nav>

.submenu-third:nth-child(-n+2){background: blue;}
.submenu li a:nth-child(2n){color: red;}

标签： htmlcsscss-selectorssubmenu

Answer 1

您可以使用 javascript 将类添加到第一个元素并为其指定 css 样式。

document.querySelector(".submenu-third").classList.add("secondClass");

.secondClass li:nth-of-type(-n+2){background-color: blue;}

<nav>
                <ul class="topmenu">
                    <li>
                        <a href="" class="active">home</a>
                        <ul class="submenu">
                            <li><a href="">menu second level 1</a></li>
                            <li><a href="">menu second level 2</a>
                                
                                <ul class="submenu-third">
                                    <li><a href=""> 1 </a></li>
                                    <li><a href=""> 2 </a></li>
                                    <li><a href=""> 3 </a></li>
                                </ul>

                                
                            </li>
                            <li><a href="">menu second level 3</a></li>
                            <li><a href="">menu second level 4</a></li>

                            <li><a href="">menu second level 5</a>
                                <ul class="submenu-third">
                                    <li><a href=""> 5 third level</a></li>
                                    <li><a href=""> 5 third level</a></li>
                                    <li><a href=""> 5 third level</a></li>
                                </ul>
                            </li>

                            <li><a href="">menu second level 6</a></li>
                            <li><a href="">menu second level 7</a></li>

                            <li><a href="">menu second level 8</a>
                                <ul class="submenu-third">
                                    <li><a href="">8menu the third level</a></li>
                                    <li><a href="">8menu the third level</a></li>
                                    <li><a href="">8menu the third level</a></li>
                                </ul>
                            </li>
                            <li><a href="">menu second level 9</a></li>
                            <li><a href="">menu second level 10</a>
                                <ul class="submenu-third">
                                    <li><a href="">10menu the third level</a></li>
                                    <li><a href="">10menu the third level</a></li>
                                    <li><a href="">10menu the third level</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="">company</a></li>
                    <li><a href="">company</a></li>
                    <li><a href="">company</a></li>
                </ul>
            </nav>