1

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

在第一个ul（With class .first）中，必须有一个不同的背景应用于每个li。所以我想用伪元素来学习如何使用它们。我更改了每个li元素的选择器编号。我必须使用:after，所以我可以用 position 移动图像背景absolute。我使用了这个 CSS：

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

为了使这更加棘手，第二个ul（.dropdown 类）需要具有与 in 不同的li背景ul.first。但是所有这些li都将具有相同的背景ul.dropdown。我只是添加了一个背景，问题就开始了，我得到了ul.first. 我希望 CSS 只针对liof ul.first，所以我可以单独定位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>
4

1 回答 1

1

您的选择器以：

ul li

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

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

ul > li

它只选择 li 的 ul 的直接子级。

然而，“下拉”也是一个 ul，所以这个规则仍然适用于两者。相反，直接定位第一个 ul ，然后直接定位它的孩子：

.first > li:nth-child(1) a:hover:after
etc..
于 2013-09-17T15:22:57.230 回答