CSS选择器分类：
1.标签选择器：标签{}
2.ID选择器：#ID{}
3.类选择器：E.className{}
4.群组选择器：E1,E2,E3{}
5.后代选择器：E F{}
6.通配符选择器：*{}
7.伪类选择器：E:PseudoElements{}
8.子类选择器：E>F{}
9.临近选择器：E+F{}
10.属性选择器：E[attr]{}
* 引入CSS到页面中的方式有3种：行内样式表、内部样式表、外部样式表
jQuery选择器分类：
-
基本选择器：#id、.class、element、*
$("#id"); // id名 $(".class"); // class类名 $("element"); // 元素名称 -
层次选择器
// 选取div里的所有的span $('div span'); // 选取div下名为span的子元素 $('div>span'); // 选取class为one的下一个div同辈元素 $('.one+div'); // 选取class为one的下一个div同辈元素 $('.one').next('div'); // 选取id为two的元素后面所有的div同辈元素 $('#two~div'); // 选取id为two的元素后面所有的div同辈元素 $('#two').nextAll('div'); -
过滤选择器
// 第1个div $('div:first'); // 最后1个div $('div:last'); // class非myClass的input元素 $('input:not(.myClass)'); // 索引为偶数的input元素 $('input:even'); // 索引为奇数的input元素 $('input:odd'); // 指定索引index的元素 $('input:eq(index)'); // 索引＞index的元素 $('input:gt(index)'); // 索引＜index的元素 $('input:lt(index)'); // 页面中所有的h标签 $(':header'); // 选取正在执行动画的div元素 $('div:animated'); // 选取当前获取焦点的元素 $(':focus'); -
内容过滤选择器
// 选取文本含有“我”的div元素 $('div:contains("我")'); // 选取不包含子元素（包括文本）的div空元素 $('div:empty'); // 选取含有p元素的div元素 $('div:has(p)'); // 选取含有子元素（包括文本元素）的div元素 $('div:parent'); -
过滤性选择器
// 选取所有不可见元素；包括input type='hidden'和 // style='display:none;' style='visibility:hidden'; $(':hidden'); // 选取所有可见元素 $('div:visiable'); //让不显示的div元素显示3000毫秒 $('div:hidden').show(3000); -
属性过滤选择器
// 选取拥有属性id的div元素 $('div[id]'); // 选取属性title为‘test’的div元素 $('div[title=test]'); // 选取属性title不是‘test’的div元素 $('div[title!=test]'); // 选取属性title以‘test’开头的div元素 $('div[title^=test]'); // 选取属性title以‘test’结尾的div元素 $('div[title$=test]'); // 选取属性title含有‘test’的div元素 $('div[title*=test]'); // 选取属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素 $('div[title|="en"]'); // 选取属性title用空格分隔的值中包含字符uk的元素 $('div[title~="uk"]'); // 选取拥有属性id，并且属性title以为‘test’结束的div元素 $('div[id][title$="test"]'); -
子元素的过滤选择器
//:nth-child(index/even/odd/equation); // :eq(index)：只匹配1个元素，下标从0开始； //nth-child(index)：中的index是从1开始的 // 选取每个ul中的第1个li元素 $('ul li:first-child'); // 选取每个ul中的最后1个li元素 $('ul li:last-child'); // 在ul中选取唯一元素是li的元素 $('ul li:only-child'); -
表单对象属性过滤选择器
// 选取id为form的表单内的所有可用的元素 $('#form :enabled'); // 选取id为form的表单内的所有不可用的元素 $('#form :disabled'); // 选取所有被选中的input元素 $('input:checked'); // 选取所有被选中的选项元素 $('select option:selected'); -
表单选择器
$(':input'); // 选取所有input、textarea、select、button元素 $(':text'); // 选取所有的单行文本框 $(':password'); // 选取所有的密码框 $(':radio'); // 选取所有的单选框 $(':checkbox'); // 选取所有的复选框 $(':submit'); // 选取所有的提交按钮 $(':image'); // 选取所有的图像按钮 $(':reset'); // 选取所有的重置按钮 $(':button'); // 选取所有的按钮 $(':file'); // 选取所有的上传域 $(':hidden'); // 选取所有的不可见元素 -
选择器中含有特殊符号
$('#id#b'); // × $('#id[1]'); // × // 正确的获取方式： $('#id\\#b'); // √ $('#id\\[1\\]'); // √ -
选取隐藏元素
// 选取class为test的元素里边的隐藏元素 $('.test :hidden'); // 选取隐藏元素class为test的元素 $('.test:hidden'); -
其他选择器
document.querySelector(); document.querySelectorAll();