0

我有一个容器 div 可以包含任意数量的孩子。我想定位作为容器 div 的直接后代的所有链接，并且可以使用.container > a. 但是，我想为容器的直接后代的第一个链接提供不同的样式。我以为.container > a:first-child会执行此任务，但似乎不会。

请注意， using.container a:first-child实际上会针对前两个“不正确”的链接，所以我不能使用它，我不认为。

显然我可以重新设计 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

2

您可以使用.container > a:first-of-type

jsfiddle：http: //jsfiddle.net/cP7jZ/

于 2013-05-21T15:59:14.013 回答
0

.container > a:first-child会起作用的，正如你从这个例子中看到的那样

于 2013-05-21T16:00:48.777 回答