前端开发常见的选择器,都在这里了,在实际工作中用也是非常常见的。工欲善,必选利其器。首先了解学习最基本的选择器。

基本选择器:

#id

.class

element

*

s1,s2,s3

层级选择器:

parent  child后代选择器

parent > child子代选择器

prev + nextOne下一个兄弟选择器

prev ~ nextAll后续所有兄弟选择器

过滤选择器——基本过滤

注意:把所有符合条件的元素放在一个大的集合中,从该大集合进行过滤。序号从0开始

:first

:last

:odd第奇数个

:even第偶数个

:eq(i)第i个

:gt(i)大于i

:lt(i)小于i

 

过滤选择器——内容过滤

:contains(内容)包含指定内容

:empty不包含任何内容

:has(s)有符合特定选择器的

:parent有内容的

 

过滤选择器——属性过滤

[name]具有指定属性

[name=value]具有指定属性和值

[name!=value]具有指定属性,不能有指定的值

[name^=start]具有指定属性,以指定值开头

[name$=end]具有指定属性,以指定值结尾

[name*=sub]具有指定属性,值包含指定内容

 

过滤选择器——可见性过滤

:hiddendisplay:none + type="hidden"【只有这2个】

:visible

子元素选择器

提示:把每个选中的元素放在其父元素对应的小组中,进行筛选;下标从1开始!不是0!!

:first-child第一个子元素

:last-child最后一个子元素

:nth-child(数字/odd/even/形如3n+1表达式)  第n个子元素

:only-child唯一子元素

表单元素选择器

:text选中

:password选中

:radio

:checkbox

:submit

:reset

:button选中

:file选中

:hidden选中

:image选中提交提交,不能选中

:input选中表单中所有的输入元素,包括input、select、textarea、button等

表单元素状态选择器

:enabled选中所有启用的元素,不带disabled属性的元素

:disabled选中表单中带 disabled 属性的元素 

:checked选中 

:selected选中