CSS首先在同一个多个元素中选择

Question

我试图在一些具有un-uinique类的元素中只选择一个<a>。 我无法找出正确的选择器来正确使用它。

Fiddle with my HTML and attempted selector

这可以通过仅编辑CSS来完成吗？

Answer 1

它可以。试试这个：

.menu-name-main-menu>ul>li:first-child>a {
    background: red;
}

所以，这就是说，只选择.menu-name-main-menu的直接子ul，然后只选择它作为直接子节点的第一个子节点，然后选择其中的锚点。

Answer 2

使用>立即选择子项，然后选择第一个<li>，而不是第一个<a>。

.menu-name-main-menu > ul > li:first-child > a {
background: red;
}

更新小提琴：http://jsfiddle.net/5hjKP/1/

Answer 3

您必须指定选择器：

<强> CSS

div.menu-name-main-menu > ul.menu > li.menu__item > a:not(:only-child) {
    background: red;
}

fiddle

Answer 4

别忘了，你可以用“nth-of-type” 例如：

.menu-name-main-menu > ul a:nth-of-type(1){background:red;}