<body> <div>hello</div> <p id="p1" alex="tom">ppp</p> <a href="">click</a> <div class="outer">outer <div class="inner">inner</div> </div> <div class="outer">outer <div class="inner">inner <p>tom</p></div> <p>jerry</p> </div> <p>sadf</p> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <input type="text"> <!--选择标签+标签操作（css）+事件处理 --> <script src="jquery-3.3.1.min.js"></script> <script> //基本选择器* # . //$("*").css("color","red");//所有标签 //$("#p1").css("color","red");//#取id名 //$(".outer").css("color","red");//.取类名，父变红，子也会红所以拿到的是2个标签 //$(".inner,p,div").css("color","red");//,隔开 //层级选择器. > + ~ //$(".outer p").css("color","red"); //$(".outer>p").css("color","red");//子代选择器 //$(".outer+p").css("color","red"); //$(".outer~p").css("color","red"); //基本筛选器用冒号，好几个相同才筛选 //$("li:first").css("color","red");//只有first和last可以 //$("li:eq(2)").css("color","red");//用eq()进行选择，，，。。。。重点 //$("li:even").css("color","red");//奇数行有效果变红 //属性选择器$("[]") //$("[alex]").css("color","red"); // $("[alex='tom']").css("color","red");//里面是单引号 //表单选择器 //$("[type='text']").css("color","red"); //$(":text").css("color","red"); // $(":text").css("width","1000px"); </script> </body> </html>