Потомок первого ребенка

Question

Я пытаюсь обратиться к потомку / ребенку первого ребенка в списке. Например:

<ul>
<li> 
<a>This "a" of the first list item should have a black background</a>
</li>
<li> 
<a></a>
</li>
<li> 
<a></a>
</li>
</ul>

Использование первого потомка, такого как "ul li: first-child", повлияет только на li, но не на потомка. Я пытаюсь отформатировать ребенка (ов) первого ребенка.

Возможно, даже "ul + li a" или что-то в этом роде, но, видимо, это тоже не пробуждает.

Answer 1

ul li:first-child a {
    background-color:black;
}

http://jsfiddle.net/UbuAx/

Answer 2

Вы специально сказали:

/* a list's */
ul

/* first child's  */
> li:first-child

/* descendant or child */
*

или

ul > li:first-child *

Как ни странно, ни один из других ответов не дает вам именно то, что вы просили, хотя я согласен с тем, что глобальный селектор не является оптимальным. Если вы можете указать, это может быть хорошо.

Answer 3

Все якоря по первому элементу списка:

ul li:first-child a { … }

Или для любых потомков:

ul li:first-child * { … }

Или только для детей (не внуков и т. Д. Потомков):

ul li:first-child > * { … }

Answer 4

Я полагаю, что вы хотите:

ul li:first-child > * {

Это будет соответствовать всем прямым потомкам первых <li>.

Если они всегда являются ссылками, вы можете заменить *для a.