Question

我有一个可容纳任意数量儿童的容器div。我想定位所有作为容器div的直接后代的链接，并且可以使用.container > a来实现。但是，我想给第一个链接提供不同的样式，这是容器的直接后代。我假设.container > a:first-child会执行此任务，但似乎不是。

请注意，使用.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>

Answer 1

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

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

Answer 2

从this example

可以看到，

.container > a:first-child会有效

我可以将直接后代与第一个子伪选择器结合使用吗？

2 个答案: