jQuery大于号(>)选择器的作用解释

  jQuery选择器中的大于号>作用是什么:

  jQuery灵活多样的选择器是jQuery的优点之一。

  下面就介绍一下其中的一个选择器,用大于号表示。

  代码示例如下:

  

复制代码 代码如下:

  <!DOCTYPE html>

  <html>

  <head>

  <meta charset=" utf-8">

  <title>蚂蚁部落</title>

  <style type="text/css">

  #box{

  width:300px;

  height:200px;

  background:black;

  }

  #middle{

  width:200px;

  height:150px;

  background:red;

  margin:0px auto;

  }

  #inner{

  width:100px;

  height:100px;

  background:blue;

  margin:0px auto;

  }

  </style>

  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

  <script>

  $(document).ready(function(){

  $("#box>div").css("background-color","green");

  });

  </script>

  </head>

  <body>

  <div id="box">

  <div id="middle">

  <div id="inner"></div>

  </div>

  </div>

  </body>

  </html>

  上面的代码可以将box元素下第一级div子元素的背景颜色设置为绿色。

  也就是说>选择器是匹配指定元素的一级子元素,而不是所有的后代元素。