Question

我有一个关于选择合适的子节点的简单CSS3问题。

以下是当前HTML元素结构的片段：

<nav>
    <ul>
        <li>
            <a href="#"><div class="adminNavButton"><p>Pages</p></div></a>
            <ul>
                <li><a href="#">Make a new page</a></li>
                <li><a href="#">Manage pages</a></li>
                <li><a href="#">Delete pages</a></li>
            </ul>
        </li>
and more .... </ul> </nav>

在CSS3中，我正在尝试选择 <a href="#"><div class="adminNavButton"><p>Pages</p></div></a>使用

nav ul li a{
}

但是，它会选择每个子锚标记，包括<ul><li>下的标记。我必须给它一个类选择器来解决这个问题吗？即。

<nav>
    <ul>
        <li>
            <a class="something" href="#"><div class="adminNavButton"><p>Pages</p></div></a>

如果您了解适用于所有浏览器的技术，如果您能与我分享，我将不胜感激。

提前致谢，

================================= 感谢你们的所有评论：第一个孩子，第一个孩子（1）没有在我的主项目中工作，所以我创建了一个新项目并测试了该方法。但它没有用所以这里是HTML结构和CSS3。

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>asf</title>
    <style>
        ul li a:first-child{
            color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <a href="">asf</a>
            <div>
                <a href="">asf</a>
            </div>
        </li>
        <li>
            <a href="">asfd</a>
            <div>
                <a href="">asf</a>
            </div>
        </li>
        <li>
            <a href="">asf</a>
            <div>
                <a href="">asf</a>
            </div>
        </li>
    </ul>
</body>


</html>

嗯heh = /（p.s.我在Firefox和Chrome浏览器上测试过它但没有用）

Answer 1

您可以使用first-child Pseudo-class：

nav > ul > li > a:first-child
{

}

另一种可以做你想要的选择是>选择器：

nav > ul > li > a
{

}

以上内容仅适用于Pages锚点。 >是子选择器，因此元素必须是直接子项，与使用以所有后代为目标的空间不同。如果您有Pages的兄弟姐妹，那么这些兄弟姐妹也会被定位，而第一个例子则不会。

<强> jsFiddle demo

来自W3C docs：

：first-child伪类表示一个元素，它是某个其他元素的第一个子元素。与：nth-child（1）相同。

Answer 2

这应该可以解决问题：

nav ul li a:first-child{
}

您也可以使用类，但如果结构保持不变（在第一个位置），则上面的示例是最佳路径。

使用CSS3只选择一个孩子

2 个答案: