0

任意の数の子を含めることができるコンテナー div があります。コンテナ div の直系の子孫であるすべてのリンクをターゲットにしたいのですが、.container > a. しかし、コンテナの直接の子孫である最初のリンクに別のスタイルを適用したいと考えています。私は.container > a:first-childこのタスクを実行すると思っていましたが、そうではないようです。

using.container a:first-childは実際には最初の 2 つの「正しくない」リンクをターゲットにすることに注意してください。

明らかに、HTML の構造を作り直すことができますが、ここに CSS ソリューションがあるかどうかを確認したいと思います。

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            .container > a
            {
                background-color: plum;
            }

            .container > a:first-child
            {
                background-color: pink;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div><a href="#">Incorrect link</a></div>
            <div><div><a href="#">Incorrect link 2</a></div></div>
            <p>Some text</p>
            <a href="#">Category 1</a>
            <a href="#">Category 2</a>
            <a href="#">Category 3</a>
        </div>
    </body>
</html>
4

2 に答える 2

0

.container > a:first-childこの例からわかるように、動作します

于 2013-05-21T16:00:48.777 に答える