如何在两个不同的父级下分别选择同名的同名子元素答案

【问题标题】：How to select child elements, of the same name, separately under two different parents, of the same name如何在两个不同的父级下分别选择同名的同名子元素
【发布时间】：2015-10-29 18:05:21
【问题描述】：

我对此很陌生，我的代码可能非常草率、过多和多余，所以我对此表示歉意。

我正在尝试向导航栏添加最后一个片段。这是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”的第一个孩子时，会同时选择“flyout-nav”，因为它们都是第一个孩子，我一直在研究 nth-children 和其他孩子选择器，但无济于事。在梳理代码几天后，现在试图提高它的效率并找到一个可以使它工作的命令，我需要对代码有一些新的认识，看看我的眼睛被蒙蔽了什么。

这是 Jsfiddle 和我的 css（注意 css 可能比我的代码更草率，仍在试图找出整个组织的东西）。

感谢您的帮助，请随时要求我澄清任何事情。

修复：我将第二个“flyout-nav”更改为“flyout-nav1”，然后更新了与“flyout-nav”相关联的所有 CSS 以包含“flyout-nav1”

新的Jsfiddle 在这里

【问题讨论】：

最简单的方法是为其中一个添加一个额外的类，这样您就可以更轻松地定位它
我知道觉得很傻。我之前尝试过，但收效甚微，但您的评论让我意识到，我并没有更改 CSS 中的所有类标签来合并新类。谢谢你解除了我的失明！
您的 HTML 无效，不能在 li 之前使用 div。更正您的 html 以使用 ul > li > ul > li 结构并相应地添加类。然后你可以使用 nth-child 选择器来做任何你想做的事情。
@Zeno 谢谢你的提示。对于其他人来说，这些是关于我一直在阅读以帮助我的结构的一些很棒的文章！ learn.shayhowe.com/html-css/creating-lists + stackoverflow.com/questions/549689/…

标签： html css code-organization css-specificity

【解决方案1】：

我相信 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) {
}

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

尝试使用“相邻兄弟选择器”（+）：

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

JSFiddle Demo

【讨论】：