html - 伪选择 nth-child tweeking

Question

我检查了几个博客，但找不到我的问题的答案。也许你可以。

在第一个 ul 中(使用类 .first)，每个 li 必须应用不同的背景。所以我想通过伪元素来学习如何使用它们。我更改了每个 li 元素的选择器编号。我必须使用 :after 以便我可以移动位置为 absolute 的图像背景。我使用了这个 CSS:

> ul li:nth-child(1) a:hover:after
> ul li:nth-child(2) a:hover:after
etc

为了使这更棘手，第二个 ul(class .dropdown)需要与 ul.first 中的 li 有不同的背景>。但是所有的 li 将在 ul.dropdown 中具有相同的背景。我只是添加了一个背景，问题就开始了，我得到了 ul.first 的背景。我希望 CSS 仅针对 ul.first 的 li，因此我可以单独针对 ul.dropdown

这是 html:

<nav>
    <a href="index.html">
        <h1 class="sprites-logo- ir">cepods</h1>
    </a>
    <ul class="first">
        <li>
            <a href="#">about</a>
        </li>
        <li>
            <a href="#">how we work</a>
        </li>
        <li class="dropli">
            <a href="#">design<i class="icon-right-open"></i></a>
            <ul class="dropdown">
                <li>
                    <a href="#">restaurant</a>
                </li>
                <li>
                    <a href="#">retail</a>
                </li>
                <li>
                    <a href="#">event space</a>
                </li>
                <li>
                    <a href="#">bar</a>
                </li>
                <li>
                    <a href="#">living</a>
                </li>
                <li>
                    <a href="#">hotel</a>
                </li>
            </ul>
        </li>
        <li>
             <a href="#">news</a>
        </li>
        <li>
             <a href="#">faq</a>
        </li>
    </ul>
</nav>

Answer 1

您的选择器开始于:

ul li

选择 ul 中的所有 li。由于“下拉列表”中的 li 也在“第一个”ul 中，因此它们也会成为您的规则的目标。

要仅选择直接在第一个里面的 li，您可以使用

ul > li

它只选择 li 是 ul 的直接子节点。

但是，“dropdown”也是一个 ul，所以这条规则仍然适用于两者。相反，直接以第一个 ul 为目标，然后直接以它的子级为目标:

.first > li:nth-child(1) a:hover:after
etc..