1.基本选择器
2.层次选择器
3.属性选择器
4.过滤选择器
4.1:基本过滤选择器
4.2:可见性过滤选择器
4.3:内容过滤选择器
4.4:子元素过滤选择器
4.5:表单对象属性过滤选择器
5.表单选择器
一、基本选择器
1.标签选择器
2.类选择器
3.ID选择器
4.并集选择器
5.交集选择器
6.全局选择器(*)
二、层次选择器
1.后代选择器(parent child)
2.子选择器(parent>child)
3.相邻元素选择器(prev+next)
4.同辈元素选择器(prev~sibings)
三、属性选择器
[attribute] 选取包含给定属性的元素
[attribute=value] 选取等于给定属性是某个特定值的元素
[attribute!=value] 选取不等于给定属性是某个特定值的元素
[attribute^=value] 选取给定属性是以某个特定值开始的元素
[attribute$=value] 选取给定属性是以某个特定值结尾的元素
[attribute*=value] 选取给定属性是包含某些值的元素
[attribute|=value] 选取 属性等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符"-")的元素
[attribute~=value] 选取属性用空格分隔的值中包含一个给定值的元素
[selector][selector2][selectorN] 选取满足多个条件的复合属性的元素
四.过滤选择器
1、基本过滤选择器
:first 选取第一个元素
:last 选取最后一个元素
:not(selector) 选取去除所有与给定选择器匹配的元素
:even 选取索引是偶数的所有元素(index从0开始)
:odd 选取索引是奇数的所有元素(index从0开始)
:eq(index) 选取索引等于index的所有元素(index从0开始)
:gt(index) 选取索引大于index的所有元素(index从0开始)
:lt(index) 选取索引小于index的所有元素(index从0开始)
:animated 选取当前正在执行的所有动画元素
:header 选取所有标题元素,如h1-h6
:focus 选取当前获取焦点的元素
2、可见性过滤选择器
:visible 选取所有可见的元素
:hidden 选取所有隐藏的元素
3、内容过滤选择器
:contains(text) 选取含有文本内容为"text"的元素
:empty 选取不包含子元素或者文本空元素
:has(selector) 选取含有选择器所匹配的元素的元素
:parent 选取含有有子元素或者文本的元素
4、子元素过滤选择器
:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素(index从1开始)
:first-child 选取每个父元素的第一个子元素
:last-child 选取每个父元素的最后一个子元素
:only-child 如果某个元素是它父元素中惟一的子元素,那么将会匹配,如果父元素含有其他元素,则不会被匹配
5、表单对象属性过滤选择器
:enabled 选取所有可用元素
:disabled 选取所有不可用元素
:checked 选取所有被选中的元素(单选框,复选框)
:selected 选取所有被选中的选项元素(下拉列表)
五、表单选择器
:input 选取所有的<input>、<textarea>、<select>和<button>元素
:text 选取所有的单行文本框
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的复选框
:submit 选取所有的提交按钮
:image 选取所有的图片按钮
:reset 选取所有的重置按钮
:button 选取所有的按钮
:file 选取所有的上传域
:hidden 选取所有不可见元素