一、基本选择器：基于元素的id、CSS样式类、元素名称等使用基于CSS的选择器机制查找页面元素。
| 名称 | 说明 |
| 标签选择器 | 根据元素的名称选择 |
| id选择器 #id | 根据元素的id选择 |
| 类选择器.class | 根据元素的class选择 |
| selector1,..,selectorN | 同时选中这几个选择器匹配的内容 |
| *通用选择器 | 选择所有元素，使用通配符* |
二、层次选择器：通过DOM元素间的层次关系获取页面元素。
| 名称 | 说明 |
| ancestor descendant 后代选择器 | 使用"form input"的形式选中from中的所有input元素。即ancestor(祖先)为from、descendant(子孙)为input |
| parent>child 父子选择器 | 选择parent的直接子节点child。child必须包含在parent中，并且父类是parent元素 |
| prev+next 相邻选择器 | prev和next是两个同级别的元素。选中在prev元素后面的next元素 |
| prev~siblings 平级选择器 | 选择prev后面的根据siblings过滤的元素。注：siblings是过滤器 |
三、过滤选择器：根据某类过滤规则进行元素的匹配。它又可以细分为简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器以及表单对象属性过滤选择器。
| 名称 | 说明 |
| :first | 匹配找到的第一个元素 |
| :last | 匹配找到的最后一个元素 |
| :not(selector) | 去除所有与给定选择器匹配的元素 |
| :odd | 匹配所有索引值为奇数的元素，从0开始计数 |
| :even | 匹配所有索引值为偶数的元素，从0开始计数 |
| :eq(index) | 匹配一个等于给定索引值的元素，index从0开始计数 |
| :gt(index) | 匹配所有大于给定索引值的元素，index从0开始计数 |
| :lt(index) | 匹配所有小于给定索引值的元素，index从0开始计数 |
| :header | 选择所有h1、h2、h3一类的header标签 |
| :animated | 匹配所有正在执行动画效果的元素 |
| 名称 | 说明 |
| :contains(text) | 匹配包含给定文本的元素 |
| :empty | 匹配所有不包含子元素或者文本的空元素 |
| :has(selector) | 匹配含有选择器所匹配的元素的元素 |
| :parent | 匹配含有子元素或者文本的元素 |
| 名称 | 说明 |
| :hidden | 匹配所有的不可见元素：①具有CSS属性display属性值为none的元素②HTML表单元素中的隐藏域即type="hidden"的元素③宽度和高度被显示设置为0的元素④由于祖先元素被隐藏而导致无法显示在页面上的元素 |
| :visible | 匹配所有的可见元素：①在屏幕上占用布局空间的元素②CSS属性visibility:hidden或者是opacity:0被认为可见 |
| 名称 | 说明 |
| [attribute] | 匹配包含给定属性的元素 |
| [attribute=value] | 匹配给定的属性是某个特定值的元素 |
| [attribute!=value] | 匹配给定的属性是不包含某个特定值的元素 |
| [attribute^=value] | 匹配给定的属性是以某些值开始的元素 |
| [attribute$=value] | 匹配给定的属性是以某些值结尾的元素 |
| [attribute*=value] | 匹配给定的属性是以包含某些值的元素 |
| [attributeFilter1][attributeFilterN] | 复合属性选择器，需要同时满足多个条件是使用 |
| 名称 | 说明 |
| ：nth-child(index/even/odd/equation) | 匹配其父元素下的第N个子元素或偶元素 ':eq(index)'只匹配一个元素，从0开始；而‘:nth-child’将为每一个父元素匹配子元素，从1开始 可以使用:nth-child(2)、:nth-child(2n)、:nth-child(even)、:nth-child(odd) |
| :first-child | 匹配第一个子元素；':first'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 |
| :last-child | 匹配最后一个子元素；':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 |
| :only-child | 匹配父元素中唯一的子元素；如果父元素中含有其他元素，那将不会被匹配 |
| 名称 | 说明 |
| :enabled | 匹配所有可用元素 |
| :disabled | 匹配所有不可用元素 |
| :checked | 匹配所有被选中元素（复选框、单选框等，不包括select中的option） |
| :selected | 匹配所有选中的option元素 |
四、表单选择器：可以在页面上快速定位某类表单对象
| 名称 | 说明 |
| :input | 匹配所有input、textarea、select和button元素 |
| :text | 匹配所有的文本框 |
| :password | 匹配所有的密码框 |
| :radio | 匹配所有的单选按钮 |
| :checkbox | 匹配所有的复选框 |
| :submit | 匹配所有的提交按钮 |
| :image | 匹配所有的图像域 |
| :reset | 匹配所有重置按钮 |
| :button | 匹配所有按钮 |
| :file | 匹配所有文件域 |
2546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
