2

我有一个关于选择适当子节点的简单 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>. 我必须给它一个类选择器来解决这个问题吗？IE

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

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

提前致谢，

================================== 谢谢大家的评论，:first-child 和 :nth-child( 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>

hmm heh =/（ps 我在 Firefox 和 Chrome 浏览器上测试过，但没有用）

4

2 回答 2

1

您可以使用第一个子伪类：

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

}

另一个可以满足您需求的选项是>选择器：

nav > ul > li > a
{

}

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

jsFiddle 演示

来自W3C 文档：

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

于 2012-12-06T07:25:35.927 回答
0

这应该可以解决问题：

nav ul li a:first-child{
}

你也可以使用一个类，但如果结构保持不变（在第一个位置），上面的例子是最好的路线。

于 2012-12-06T07:24:36.117 回答