1

いくつかのブログをチェックしましたが、問題に対する答えが見つかりません。たぶんあなたはできる。

最初のul(With クラス.first) では、それぞれに異なる背景を適用する必要がありますli。そこで、疑似要素を使って使い方を学びたいと思いました。li各要素のセレクターの番号を変更しました。:afterposition で画像の背景を移動できるように使用する必要がありましたabsolute。私はこのCSSを使用しました：

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

これをさらに難しくするには、2 番目の(class .dropdown) をinulとは異なる背景にする必要があります。しかし、すべての背景は同じです。背景を追加しただけで問題が始まりました. CSS で of のみをターゲットにしたいので、個別にターゲットにすることができますliul.firstliul.dropdownul.firstliul.firstul.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 のすぐ内側にある li のみを選択するには、次のように使用できます。

ul > li

ul の直接の子である li のみを選択します。

ただし、「dropdown」も ul であるため、このルールは両方に適用されます。代わりに、最初の ul を直接ターゲットにしてから、その子を直接ターゲットにします。

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