Question

我对此非常陌生，我的代码可能非常草率，过度和多余，所以我为此道歉。

我正在尝试将最后一块添加到导航栏中。这是HTML，一个小提琴将附在底部。

<body>
    <div id="container">
        <header class="main-header">
            <ul class="main-nav">
                <li> <a id="h" href=".html">_______ _______ __________</a> </li>
            </ul>
            <ul class="second-nav">
                <li> <a id="a" href=".html">_____ __</a> </li>
                <li class="dropdown"> <a id="p" href=".html">_________</a>
                    <ul class="drop-nav">
                        <div class="flyout">
                            <li> <a id="r" href=".html">___________</a> </li>
                            <ul class="flyout-nav">
                                <li> <a href=".html">___</a> </li>
                                <li> <a href=".html">______ _ _____</a> </li>
                                <li> <a href=".html">______ ________</a> </li>
                            </ul>
                        </div>
                        <div class="flyout">
                            <li> <a id="c" href=".html">__________</a> </li>
                            <ul class="flyout-nav">
                                <li> <a href=".html">______ ________</a> </li>
                                <li> <a href=".html">___________</a> </li>
                                <li> <a href=".html">______ _____</a> </li>
                            </ul>
                        </div>
                        <li> <a href=".html">______ _______</a> </li>
                    </ul>
                </li>
                <li> <a href=".html">_______ __</a> </li>
            </ul>
        </header>

我试图单独选择两个不同的“flyout-nav”，但我似乎无法找到正确的特异性来单独选择每个。

我需要做的就是围绕第二个“flyout-nav”的左上角，同时保持第一个“flyout-nav”的左上角正方形。

我相信我的问题是，当我尝试选择“弹出”的第一个孩子时，选择两个“flyout-nav”，因为他们都是第一个孩子，我一直在寻找n-children和其他孩子选择但无济于事。在此之后，通过代码梳理了几天，现在试图使其更有效并找到一个能使其工作的命令，我需要对代码有一些新的眼睛，看看我的眼睛被蒙蔽了。

这是我的css Jsfiddle（注意css可能比我的代码更邋,,仍在试图找出整个组织的事情。）

感谢您的帮助，请不要犹豫，让我澄清一切。

修正：我将第二个“flyout-nav”更改为“flyout-nav1”，然后更新了与“flyout-nav”相关的所有css，以便合并“flyout-nav1”

新Jsfiddle此处

Answer 1

尝试使用'相邻的兄弟选择器'（+）：

ul.drop-nav div.flyout + div.flyout ul.flyout-nav {
    /* css for the second flyout */
}

JSFiddle Demo

Answer 2

您的HTML结构无效。这是一个有效的HTML结构。

<!DOCTYPE html>
<head>
<title>Test</title>
</head>
<body>
    <div id="container">
        <header class="main-header">
            <ul class="main-nav">
                <li>
                    <a id="h" href=".html">_______ _______ __________</a>
                </li>
            </ul>
            <ul class="second-nav">
                <li>
                    <a id="a" href=".html">_____ __</a>
                </li>
                <li class="dropdown"> <a id="p" href=".html">_________</a>
                    <ul class="drop-nav">
                        <li class="flyout">
                            <a id="r" href=".html">___________</a>
                            <ul class="flyout-nav">
                                <li><a href=".html">___</a>

                                </li>
                                <li><a href=".html">______ _ _____</a>

                                </li>
                                <li><a href=".html">______ ________</a>

                                </li>
                            </ul>
                        </li>
                        <li class="flyout">
                            <a id="c" href=".html">__________</a>
                            <ul class="flyout-nav">
                                <li><a href=".html">______ ________</a>

                                </li>
                                <li><a href=".html">___________</a>

                                </li>
                                <li><a href=".html">______ _____</a>

                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href=".html">______ _______</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href=".html">_______ __</a>
                </li>
            </ul>
        </header>
    </div>
</body>

然后使用:nth-child()选择器，或添加自定义类。

在这里试试nth-child： https://css-tricks.com/examples/nth-child-tester/

Answer 3

我相信Mr__Goat想要单独选择这两个元素，这样他就可以为每个元素应用不同的样式。以下CSS选择器将分别引用每个元素。

/* First .flyout-nav */
.drop-nav .flyout-nav:nth-of-type(1) {
}

/* Second .flyout-nav */
.drop-nav .flyout-nav:nth-of-type(2) {
}

如何选择具有相同名称的子元素，分别在两个不同的父级下，使用相同的名称

3 个答案: