jQuery中选择器空格问题

学习《锋利的iQuery》（第二版）ing

翻到“5.2.1表格变色”，敲代码的时候脑一抽，想“$("tbody>tr:odd")这里的tr与:odd加个空格会有什么效果”。

不试不知道，一试吓我汪一跳。

原：

$(function(){
		$("tbody>tr:odd").addClass("odd"); 
		$("tbody>tr:even").addClass("even"); 
})

效果：

加空格后：

$(function(){
		$("tbody>tr  :odd").addClass("odd"); 
		$("tbody>tr  :even").addClass("even"); 
})

效果：

果断翻书，发现书上专门有讲（P51），包括网上大部分也是拿这个例子讲解“选择器空格问题”（我汪看书不认真啊。。。。）

如下：

<div class="test"> 
  <div style="display:none;">aa</div> 
<div style="display:none;">bb</div> 
<div style="display:none;">cc</div> 
<div class="test" style="display:none;">dd</div> 
< /div> 
< div class="test" style="display:none;">ee</div> 
< div class="test" style="display:none;">ff</div> 

然后使用jQuery选择器分别获取它们

var $t_a = $('.test :hidden');          //注意空格
var $t_b = $('.test:hidden'); 
var len_a = $t_a.length; 
var len_b = $t_b.length; 
alert("$('.test :hidden') = "+len_a);  //输出 4  有空格 是选取class为“test”的元素里面的隐藏元素。
alert("$('.test:hidden') = "+len_b);   //输出 3  没有空格 则是选取隐藏的class为“test”的元素

之所以会出现不同的结果，是因为后代选择器与过滤选择器的不同。 
var $t_a = $('.test :hidden'); //有空格 是选取class为“test”的元素里面的 隐藏元素。 

var $t_b = $('.test:hidden'); //没有空格 则是选取隐藏的 class为“test”的 元素。 

想了好长时间，还是不太明白。

结合我遇到的问题，我汪暂时有以下的理解：

该层次选择器 $("parent >child ") ，选择parent元素下的child（子）元素。

所以，

$("tbody>tr :odd").addClass("odd");  

无空格是给tbody中的奇数行添加样式。

而

$("tbody>tr    :odd").addClass("odd");  

有空格是给tbody中的奇数[tr元素]添加样式。

另外，我汪又尝试一个加空格，一个不加空格。

$(function(){
		$("tbody>tr :odd").addClass("odd"); 
		$("tbody>tr:even").addClass("even");
})

效果：

这汪的为什么啊。。

先睡觉先。。

2014.6.18更新

原本以为是CSS特殊性的问题，查了半天发现没用。

但是，用firebug看一下结构，发现问题了。

如下：

看来我理解的略微对。

$("tbody>tr :odd").addClass("odd");  

无空格是给tbody中的奇数行添加样式。

而

$("tbody>tr    :odd").addClass("odd");  

有空格是给tbody中的奇数[tr元素]添加样式。  //这里有修改。

最开始的版本是：有空格是给tbody中的 奇数元素添加样式。

真是理解一点都不能有偏差。

完、