css - 使用子选择器的菜单 css

Question

我有以下菜单:

<ul class="top-menu">
<li><a_href="/Products" title="Products"><span>Products</span></a><ul>
<li><a_href="/Products/List" title="Product List"><span>Product List</span></a></li>
</ul>
</li>
<li><a_href="/Customers" title="Customers"><span>Customers</span></a></li>
</ul>

而且我还有一个顶部菜单项(产品、客户)的 Sprite 图。如何使菜单的顶级链接显示图像？考虑过 css nth-child 选择器

ul.top-menu
{
    list-style: none;
    width:528px;
}

ul.top-menu li a
{
    display:block;
    float:left;
    height:40px;
    background-image:url(../Images/sprite-menu.png);
    text-indent:-9999px;
}

ul.top-menu:nth-child(1) a
{
    width:135px;
    background-position:0 0;
}

但它不起作用。谢谢。

Answer 1

第 n 个子选择器设置在子元素上，而不是父元素上

为了使您的示例有效，我在 li 上使用了第 n 个子选择器而不是 ul，如下所示:

ul.top-menu li:nth-child(1) a
{
    width:135px;
    background-position:0 0;
}

当然，您的示例 HTML 中的“

您可能想要链接子选择器

为了实现我相信您想要的效果，即只有顶级元素获得样式，我会改用 CSS 子选择器:

/* desired top-level-only styles go here */
ul.top-menu>li>a
{
    width:135px;
    background-position:0 0;
}