面试题:css中有哪些选择器?jquery中有哪些选择器

css 选择器

1- 基础选择器

1- ID选择器       // #id
2- 类名选择器     // .class
3- 元素选择器     // element
4- 全局选择器     // *
5- 并集选择器
	selector1,selector2 //选择满足选择器1条件的元素,也选择满足选择器2条件的元素,一起选择到统一设置样式
6- 交集选择器
	selector1selector2 //要选择的元素既要满足选择器1的条件又要满足选择器2的条件

2- 层级选择器

1-后代选择器
	selector1 selector2 //先根据选择器1找到符合条件的元素,然后从他的后代中选择满足选择器2的元素
2-子元素选择器
	selector1>selector2 //先根据选择器1找到符合条件的元素,然后从他的子元素中选择满足选择器2的元素
3-相邻兄弟选择器
	selector1+selector2 //先根据选择器1找到符合条件的元素,然后从其后的紧邻兄弟元素选择满足选择器2的元素
4-通用兄弟选择器
	selector1~selector2 //先根据选择器1找到符合条件的元素,然后从其后所有兄弟元素选择满足选择器2的元素

3- 属性选择器

[attr] //选择到拥有attr属性的元素
[attr="value"] //选择到属性attr的值是value的元素
[attr^="value"] //选择到属性attr的值以value开头的元素
[attr$="value"] //选择到属性attr的值以value结束的元素
[attr*="value"] //选择到属性attr的值包含value的元素

4- 伪类选择器

1-动态伪类选择器

1- E:link //选择到地址没有被访问过的超链接
2- E:visited //选择到地址被访问过的超链接
3- E:hover //选择到鼠标悬停在上面的元素
4- E:active //选择到激活状态(鼠标在元素上按键按下不松手)的元素
5- E:focus //选择到获取焦点的元素

2-目标伪类选择器

:target //选择到锚点指向的元素

3-语言伪类选择器

:lang(en) //选择到所有语言设置是en的元素(元素会继承祖先元素的语言设置)

4-UI伪类选择器

:disabled //选择到不可用的表单控件(设置了属性disabled)
:enabled //选择到可用的表单控件(所以的表单控件默认都是可用的)
:checked //选择到选中的单选按钮和复选框

5-结构伪类选择器

:first-child //元素是兄弟元素中的第一个
:last-child //元素是兄弟元素中的最后一个
:nth-child(n) //元素是兄弟元素中的第n个
:nth-last-child(n) //元素是兄弟元素中的倒数第n个(n可以是数字,也可以是关键字odd或even)
:only-child //选择到没有兄弟元素的元素

:first-of-type //同标签名兄弟元素中的第一个
:last-of-type //同标签名兄弟元素中的最后一个
:nth-of-type(n) //同标签名兄弟元素中的第n个
:nth-last-of-type(n) //同标签名兄弟元素中的倒数第n个
:only-of-type //选择到没有同标签名兄弟元素

:root //选择到根元素
:empty //既没有子元素也没有文本内容的元素

5- 伪元素选择器

::first-letter //给第一个字符设置样式
::first-line //给第一行文字设置样式
::before //动态的创建第一个子元素并设置样式,必写样式content
::after //动态的创建最后一个子元素并设置样式,必写样式content
::placeholder //设置表单控件文字提示的样式
::selection //给选中的文字设置样式

选择器优先级总结

!important > 行内式 > ID选择器 > 类选择器、伪类选择器、属性选择器 > 元素选择器、伪元素选择器 > 全局选择器
//如果有层级比较多的组合选择器,需要比较他们的优先级,查找ID选择器,类名选择器等的数量,进行权重的计算

jQuery 选择器

1- 基本选择器 (与css选择器一致)

1- ID选择器
2- 类名选择器
3- 元素选择器
4- 全局选择器
5- 并集选择器
6- 交集选择器

2- 层级选择器 (与css选择器一致)

1-后代选择器
2-子元素选择器
3-相邻兄弟选择器
4-通用兄弟选择器

3- 属性选择器

'与css选择器一致的:'
[attr]
[attr=value]
[attr^=value]
[attr$=value]
[attr*=value]

'jQuery特有的属性选择器:'
[attr!=value] //属性值不是value的元素

4- 伪类选择器

1- 过滤选择器

'与css选择器一致的:'
:root
:target
:lang()
:focus
:not(selector)

'jQuery选择器特有的:(索引从0开始)'
:first //获取第一个元素
:last //获取最后个元素
:eq(n) //匹配一个给定索引值的元素
:lt(n) //匹配所有小于给定索引值的元素
:gt(n) //匹配所有大于给定索引值的元素
:odd //匹配所有索引值为奇数的元素,从 0 开始计数
:even //匹配所有索值为偶数的元素,从 0 开始计数
:header //所有标题元素(h1~h6)
:animated //正在执行jQuery动画的元素

2- 内容选择器

:contains(text) //包含指定文本内容的元素(自身包含或者后代元素包含)
:has(selector) //要求选择到的元素包含满足条件的后代元素
:empty //没有内容也没有后代元素的元素(与css选择器一致)
:parent //有内容或者有后代的元素,与empty相反

3- 可见性选择器

:hidden //不可见元素(display:none 和 type值为hidden的input元素)
:visible //可见的元素,除了不可见的都是可见的

4- 子元素选择器 (与css选择器中的结构伪类选择器一致)

:first-child
:last-child
:nth-child(n)
:nth-last-child(n)
:only-child
:first-of-type
:last-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:only-of-type

5- 表单选择器

:input //所有的表单控件包括 input,button,textarea,select等
:text //获取type值是text的input元素
:password //获取type值是password的input元素
:radio //获取type值是radio的input元素
:checkbox //获取type值是checkbox的input元素
:submit //获取type值是submit的input或button元素
:reset //获取type值是reset的input或button元素
:button //获取type值是button的input或button元素

6- 表单对象选择器

'与css中的UI伪类选择器一致:'
:enabled 
:disabled
:checked //被选中的单选按钮,复选框或下拉选项(option)元素(与css中的有区别)

'jQuery特有的选择器:'
:selected //被选中的下拉选项(option)元素
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值