选择器 | css | jquery | 解释 | ||
基本选择器 | * | 通配选择器 | *{} | $("*") | 所有元素 |
E | 元素选择器 | p{} | $("p") | 所有p标签 | |
#id | ID选择器 | #hd{} | $("#hd") | id是hd的元素 | |
.class | 类选择器 | .logo{} | $(".logo") | class是logo的元素 | |
selector1,selectN | 群组选择器 | div,span,p{} | $("div,span,p") | 所有div、span、p | |
层次选择器 | E F | 后代选择器 | body div{} | $("body div") | 页面上所有div |
E>F | 子选择器 | body>div{} | $("body>div") | 页面上所有第一层div | |
E+F | 相邻兄弟元素 | .logo+div | $(".logo+div")或$(".logo").next(F) | 紧邻class是logo的元素后面的div | |
E~F | 通用兄弟选择器 | .logo~div | $(".logo~div")或$(".logo").nextAll(F) | class是logo的元素后面的所有div | |
动态伪类选择器 | E:link | 链接伪类选择器 | a:link{} | no | 未被点击的所有a标签 |
E:visited | 链接伪类选择器 | a:visited{} | no | 被点过的所有a标签 | |
E:active | 用户行为伪类选择器 | input:active{} | no | 所有点击过的input框 | |
E:hover | 用户行为伪类选择器 | a:hover | no | 鼠标停留在的a标签 | |
E:focus | 用户行为伪类选择器 | inupt:focus | no | 点击着的input框 | |
基础内容过滤器 | E:focus | 焦点 | no | $(":focus") | **** |
E:even | 偶 | no | $("input:even") | 选取索引是偶数的input | |
E:odd | 奇 | no | $("input:odd") | 选取索引是奇数的input | |
E:eq(n)/E:gt(n)/E:lt(n) | 前后 | no | $("input:eq(1)")/$("input:gt(1)")/$("input:lt(1)") | 选取索引等于/大于/小于index元素的input | |
E:header | h标签 | no | $(":header") | 选取所有的标题元素 | |
E:animated | 动画 | no | $("div:animated") | 选取当前正在执行的动画元素 | |
E:first | 第一个 | no | $("ul>li:first") | **** | |
E:last | 最后一个 | no | $("ul>li:last") | **** | |
否定选择器 | E:not(F) | 否定选择器 | input:not([type=submit]){} | $("input:not(type=submit)") | **** |
结构伪类选择器 | E:first-child | 第一个子元素 | ul>li:first-child | no | 选取div中第一个div |
E:last-child | 最后一个子元素 | ul>li:last-child | no | 选取div中最后一个div | |
F E:nth-child(n) | F的第n个E类型的子元素 | ul>li:nth-child(2) | no | **** | |
F E:nth-last-child(n) | F的最后一个E类型的子元素 | ul>li:nth-last-child | no | **** | |
E:root | 匹配根元素,始终是html | div:root | no | **** | |
E:nth-of-type(n) | 第E类型的子元素 | div>p:nth-of-type(2) | no | **** | |
E:first-of-type | 第一个e类型的子元素 | div:first-of-type | no | **** | |
E:nth-last-of-type(n)或E:last-of-type | 最后一个e类型的子元素 | div>p:nth-last-of-type | no | **** | |
E:only-child | 选择父元素只包含一个子元素,且类型为E | p:only-child | no | **** | |
E:only-of-type | 选择父元素只包含一个同类型的元素,且类型为E | p:only-child | no | **** | |
E:empty | 选择没有子元素的元素,且没有任何文本节点 | p:empty | no | **** | |
UI元素状态伪类选择器 | E:checked或E[checked] | 选中状态伪类选择器 | .chekbox:checked | $("input:checked") | 所有选中的class为chekbox的元素 |
E:enabled | 启用状态伪类选择器 | yes | $("#form1:enabled") | **** | |
select option:selected | 选取被选中的元素 | no | $("select option:selected") | **** | |
E:disabled | 不可用状态伪类选择器 | yes | $("#form2:disabled | **** | |
伪元素选择器 | ::first-letter | 选择文本块的第一个字母 | yes | no | **** |
::first-line | 选择第一行文本 | yes | no | **** | |
::befor和::after | 额外内容位置,不加入DOM,需要content属性辅助,通常用来做ICON | yes | no | **** | |
::selection | 匹配突出显示的文本,仅接受两个属性background和color | yes | no | **** | |
属性选择器 | E[attr] | 选择具有属性attr的元素 | yes | $("div[id]") | **** |
E[attr=val] | 选择具有attr属性,且属性值等于val的元素 | yes | $("div[title=test]") | **** | |
E[attr!=val] | 不等于val的元素 | no | $("div[title!=test]") | **** | |
E[attr|=val] | 属性值等于val或以val-开头 | yes | $("div[title|=test]") | **** | |
E[attr~=val] | 属性值以空格分隔,有一个属性为val | yes | $("div[title~=test]") | **** | |
E[attr*=val] | 属性值中任意位置包含val | yes | $("div[title*=test]") | **** | |
E[attr^=val] | 属性值以val开头 | yes | $("div[title^=test]") | **** | |
E |
| no | $("div[id=a][title$=test]") | **** | |
E[attr$=val] | 属性值以val结尾 | yes | $("div[title$=test]") | **** | |
可见性过滤器 | E:hidden | 选取不可见元素 | no | $(":hidden") | **** |
E:visible | 选取可见元素 | no | $(":visible") | **** | |
内容过滤器 | E:contains(text) | 选取文本中含有test的元素 | no | $("div:contains('aaa')") | **** |
E:empty | 选取不含子元素和文本元素的元素 | no | $("div:empty") | **** | |
E:has(selector) | 选取含有选择器所匹配的元素 | no | $("div:has(p)") | **** | |
E:parent | 选取含有子元素和文本元素的元素 | no | $("div:parent") | **** | |
表单选择器 | $(":input") | 选取所有input、textara、select、button | no | $(":input") | **** |
$(":text") | 选取所有单行文本 | no | $(":text") | **** | |
$(":password") |
| no | $(":password") | **** | |
$(":radio") |
| no | $(":radio") | **** | |
$(":checkbox") |
| no | $(":checkbox") | **** | |
$(":submit") | 选取所有提交按钮 | no | $(":submit") | **** | |
$(":image") |
| no | $(":image") | **** | |
$(":reset") |
| no | $(":reset") | **** | |
$(":button") |
| no | $(":button") | **** | |
$(":file") |
| no | $(":file") | **** | |
$(":hidden") |
| no | $(":hidden") | **** |