超实用的选择符表达式（基于jQuery）

超实用的选择符表达式（基于jQuery）

简单的CSS选择符

---

*                       所有元素

#id                    带有给定ID的元素

element            给定类型的所有元素

.class               带有给定类的所有元素

a, b                  与a或b匹配的元素

a b                   作为a后代b匹配的元素

a > b                作为a子元素的b匹配的元素

a + b                作为a后面直接同辈元素的b匹配的元素

a ~ b                作为a后面同辈的b匹配的元素

 

在同辈元素间定位

---

:nth-child(index)                作为其父元素第index个子元素的元素（从1开始计数）

:nth-child(even)                 作为其父元素第偶数个子元素的元素（从1开始计数）

:nth-child(odd)                   作为其父元素第奇数个子元素的元素（从1开始计数）

:nth-child(formula)             作为其父元素第n个子元素的元素（从1开始计数）。formula（公式）的格式为an + b，a、b为整数  （这个我也不大懂，了解的朋友希望评论告诉我一下，谢谢）

:nth-last-child()                  与:nth-child()相同，只不过是从最后一个元素开始倒计数

:first-child                          作为其父元素第一个子元素的元素

:last-child                          作为其父元素最后一个子元素的元素

:only-child                         作为其父元素唯一一个子元素的元素

:nth-of-type()                    与:nth-child()相同，只不过只计相同元素

 

在匹配的元素间定位

 

---

 

:first                                 结果集中的第一个元素

:last                                 结果集中的最后一个元素

:not(a)                             结果集中与a不匹配的所有元素

:even                               结果集中的偶数元素（从0开始计数）

:odd                                结果集中的奇数元素（从0开始计数）

:eq(index)                       结果集中索引为index的元素（从0开始计数）

:gt(index)                        结果集中所有位于给定索引之后（大于该索引）的元素（从0开始计数）

:lt(index)                         结果集中所有位于给定索引之后（小于该索引）的元素（从0开始计数

 

表单

---

:input                             所有<input>、 <select>、<textarea>和<button>元素

:text                               type = 'text'的<input>元素

:password                      type = 'password'的<input>元素

:file                                 type = 'file'的<input>元素

:radio                              type = 'radio'的<input>元素

:checkbox                      type = 'checkbox'的<input>元素

:submit                           type = 'submit'的<input>元素

:image                           type = 'image'的<input>元素

:reset                             type = 'reset'的<input>元素

:button                           type = 'button'的<input>元素及<button>元素

:enabled                        启用的表单元素

:disabled                       禁用的表单元素

:checked                       选中的复选框和单选按钮元素

: selected                      选中的<option>元素

 

其他自定义选择符

---

 

:root                              文档的根元素

:header                         标题元素（如<h1>、<h2>）

:animate                        其动画正在播放的元素

:contains(text)               包含给定文本text的元素

:empty                           不包含子节点的元素

:has(a)                           后代元素中至少有一个与a匹配的元素

:parent                           包含子节点的元素

:hidden                          隐藏的元素，包括通过css隐藏的元素及<input type = 'hidden' />

:visible                           与:hidden匹配的元素相反

:focus                            获得键盘焦点的元素

:lang(language)             具有给定（在元素的lang属性或<meta>标签中声明的）语言代码的元素

:target                            URI标识符指向的目标元素

 

posted on 2018-06-28 10:02 jx_star 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/jxstar/p/9235034.html