选择直接后代不工作

Question

http://jsfiddle.net/fVtyP/

$('.menu > li a').css('background-color', 'red');

或

$('.menu > li').find('a').css('background-color', 'red');

我只想选择直接后代，但这似乎不起作用。

Answer 1

从技术上讲，根据您的布局，所有<a>元素都是<li>的子元素。您需要直接选择两次：

$('.menu > li > a').css('background-color', 'red');

Answer 2

使用方法.children()，您可以选择选择器的第一个子级别

试试这个：

$('.menu > li').children('a').css('background-color', 'red');

DEMO

Answer 3

http://jsfiddle.net/fVtyP/3/

$('.menu > li > a').css('background-color', 'red'); //用类菜单选择元素的直接后代直接后代

$('.menu > li').children('a').css('background-color', 'red'); //在具有类菜单的元素的li直接后代中选择所有类型为anchor的子项