技术学习

我所喜欢的

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

第一个: 

  1:空格表示所有  

  2:> 第一层 

  3:+/~ 同级

    +:之后的第一个元素

    ~:之后所有同级

d

 

代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <script type="text/javascript" src="jquery-1.7.min.js"></script>  
 <script type="text/javascript">  
 $(document).ready(function(){    
     $("form input").css("color", "red");  //给form元素的后代input元素设置字体颜色  
     $("div>div").css("background", "#FCF");  //给maindiv下的子元素div1和div2设置背景颜色  
     $("div~input").css("border", "2px solid blue");  //给div元素后面的所有input元素设置边框  
     $("div+input").css("border", "2px solid red");  //给紧跟在div元素后的input元素设置边框  
  });
 </script>  
 <title>层级选择器</title>  
 </head>  
 <body>  
    <form id="form1">  
        <label>form元素的后代input元素为:input1, input2, input3</label>  
        <input type="text" id="input1" value="文本框1" />  
        <div id="maindiv">  
           <div id="div1">maindiv的子元素:id为div1</div>  
           <div id="div2">maindiv的子元素:id为div2</div>  
        </div>   
        <input type="text" id="input2" value="文本框2" />  
        <input type="text" id="input3" value="文本框3" /><br />  
        <label>maindiv的所有子元素为:div1, div2</label>  
    </form>  
 </body>  
 </html>

  

posted on 2016-03-01 12:15  飘扬De黑夜  阅读(510)  评论(0编辑  收藏  举报