Web前端从入门到放弃(css3选择器的总结)

Web前端从入门到放弃(css3选择器的总结)


一、基本选择器

选择器类型功能描述
*通配选择器选择文档中所有的html元素
E元素选择器选择指定的类型的html元素
idID选择器选择指定ID属性值为“id”的任意类型的元素
.class类选择器选择指定的class属性值为“class”的任意类型的任意多元素
selector1,selector2群组选择器将每一个选择器匹配的元素集合并

二、层次选择器

选择器类型功能描述
E F后代选择器选择匹配的F元素,且F元素被包含在匹配的E元素内(只要是后代同时起作用。)
E > F子选择器选择匹配的F元素,且F元素是E元素的子元素(第一层div起作用,有迭代关系。)
E + F相邻兄弟选择器选择匹配的F元素,且F元素是E元素后面紧邻的兄弟元素 (找相邻第一个兄弟节点。)
E ~ F通用选择器选择匹配的F元素,且F元素是E元素后面的所有兄弟元素(找下面的兄弟节点。找弟弟)

三、属性选择器

选择器功能描述
E[attr]选中具有attr属性的E元素
E[attr=val]选中具有attr属性,并且属性值为val的E元素
E[attr=val]
E[attr~=val]选中具有attr属性,并且属性值包含val的E元素,该属性值必须以空格隔开
E[attr*=val]通配符选中具有attr属性,并且属性值包含val的E元素
E[attr^=val]起始符选中具有attr属性,并且属性值以val开始的E元素
E[attr$=val]结束符选中具有attr属性,并且属性值以val结束的E元素

四、结构伪类选择器语法

选择器功能描述
E : first-child作为父元素的第一个子元素的E元素
E : last-child作为父元素的最后一个子元素的E元素
E : root
E F:nth-child(n)选中的F元素是E元素的第n个子元素
E F: nth-last-child(n)选中的F元素是E元素的倒数第n个子元素
E : nth-of-type(n)选择父元素内具有指定类型的第n个E元素
E : nth-last-of–type(n)选择父元素内具有指定类型的倒数第n个E元素
E : first-of-type选择父元素内具有指定类型的第1个E元素
E : last-of-type选择父元素内具有指定类型的倒数第1个E元素
E : only-child选择父元素内只包含一个子元素,且该元素是E元素
E : only-of-type选择父元素内只包含一个类型的子元素,且该元素是E元素
E : empty选择没有子元素的元素

五、新增伪类

选择器功能描述
E :: first-letter选择文本块的第一个字母
E :: first-line选择文本快的第一行
E :: before 和E :: after主要用于清除浮动
E :: selection选中的E元素

六、 目标伪类选择器

选择器类型功能描述
E : target目标伪类选择器选择匹配E的所有元素,且匹配元素被相关URL指向

七、 UI元素状态伪类选择器

选择器类型功能描述
E : checked选中状态伪类选择器匹配选中的复选按钮或单选按钮,并且他们是选中状态
E : enabled启用状态伪类选择器匹配启用状态的表单元素
E : disabled不可用状态伪类选择器匹配禁用状态的表单元素
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值