如何将select、child元素，同名，分开下两个不同的parents，同名

Question

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

我正在尝试将最后一块添加到我的导航栏中。这里是HTML，下面会附上一个fiddle。

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

我正在尝试分别 select 两个不同的 "flyout-nav"，但是我似乎无法找到每个 select 的正确特异性。

我需要做的就是将第二个 "flyout-nav" 的左上角圆化，同时保持第一个 "flyout-nav" 的左上角正方形。

我相信我的问题是，当我尝试 select 时，"flyout" 的第一个 child 是 select 和 "flyout-nav"，因为它们都是第一个 children，我一直在研究 nth-children 和其他 child select 人，但无济于事。在梳理了几天的代码之后，现在试图提高它的效率并找到一个可以让它工作的顺序后，我需要一些新的眼光来看待代码，看看我的眼睛被蒙蔽了。

这是我的 css 的 Jsfiddle（注意 css 可能比我的代码更草率，仍在尝试弄清楚整个组织的事情）。

感谢您的帮助，如有任何疑问，请不要犹豫。

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

这里新增Jsfiddle

Answer 1

尝试使用 'adjacent sibling selector' (+):

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() 选择器，或添加自定义 class.

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

Answer 3

我相信 Mr__Goat 想 select 分别对这两个元素进行处理，这样他就可以对每个元素应用不同的样式。以下 CSS select 或将单独引用每个元素。

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

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

如何将select、child元素，同名，分开下两个不同的parents，同名

How to select child elements, of the same name, separately under two different parents, of the same name

html

css

code-organization

css-specificity