jQuery之CSS选择符 - 大于号模式 空格的作用

摘要: 先看一下例子，很简单的结构：以下为引用的内容：<divid="test"><div><div>a</div><div>b...

先看一下例子，很简单的结构：

以下为引用的内容：
<div id="test"> <div> <div>a</div> <div>b</div> <div>c</div> </div> <div> <div>d</div> <div>e</div> </div></div>对上面这段HTML，我们可以分别执行下面两条语句： 
alert($('#test>div').length); 
alert($('#test div').length);

　　第一条语句使用了大于号选择符，代表在#test的第一级子元素中查找div元素，在这个例子中得出的结果就是2。

　

第二条语句使用了空格选择符，代表在#test的所有级别的子元素中查找div元素，在这个例子中得出的结果就是7，既包括第一级子元素的2个，也包括第二级子元素的5个。

其实这个跟 CSS样式中” 大于号” 功能是一样的

CSS样式中” 大于号”

       在一段CSS代码中见到一个大于号(>)，代码如下：

       BODY#css-zen-garden > DIV#extraDiv2 {

              BACKGROUND-IMAGE:url(../images/bg_face.jpg);

              Z-INDEX: 2;

              POSITION: fixed;

              WIDTH: 205px;

              BOTTOM: 0px;

              BACKGROUND-REPEAT: no-repeat;

              BACKGROUND-POSITION: left bottom;

              HEIGHT: 594px;

              LEFT: 0px

}

CSS中的大于号表示什么意思呢？

举例说明：有一个DIV层包含多个span标签，代码如下：

<div>

       <span>亲人</span>

       <span>独家记忆</span>

       <span>离不开你</span>

</div>

此时用CSS定义其样式应该这样：

div span {

       font:10px;

       color:blue;

}

但是此时，需要将第一个span标签显示不同的样式，后两个<span>标签样式不变，怎么办呢？将第一个span放到一个p标签中，这样可以吗？代码如下：

<div>

       <p>

              <span>亲人</span>

       </p>

       <span>独家记忆</span>

       <span>离不开你</span>

</div>

       遗憾的是这样不可以，因为div span {……}样式对div层之下的所有span标签都起作用，不管是子标签，还是孙子辈的标签，所以该样式依然起作用。此时就用到了CSS中的”大于号”。

       现在我们把这个样式改变一下，代码如下：

div > span {

       font:10px;

       color:blue;

}

这样就可以实现第一个span标签与其它两个显示不同的样式。所以我们可以知道CSS中的”大于号”的作用是：在嵌套标签中，将样式只作用于儿子辈的标签，而不作用于孙子辈的标签。

但是还存在这样一种情况，如下代码：

<div>

       <span>

亲人

              <span>

                     丁当

</span>

</span>

       <span>独家记忆</span>

       <span>离不开你</span>

</div>

此时，这个”大于号”还会起作用吗？答案是：不会。因为这个孙子辈的span标签继承儿子辈的span标签样式。