摘要:对于一个前端,选择器是日常生活中必须接触的部分,这篇文章主要探讨一下选择其的分类及一些小技巧。
对于一个前端er,选择器是日常生活中必须接触的部分,这篇文章主要探讨一下选择其的分类及一些小技巧。
【分类】
1.基础选择器
2.结构选择器
3.伪类选择器
4.伪元素
5.属性选择器
【描述】
1.基础选择器(浏览器都兼容)
* 通配符 (可以匹配元素中所有的html元素) 如:*{color:#000;}则代表将页面全部元素添加属性为#000的颜色值; E 元素选择器(匹配特定的标签) 如:a{text-decoration:underline;}则代表将页面所有的a标签设置下划线; #id ID选择器(匹配页面特定的id) 如:#my{color:#000}则代表将页面id为my的元素添加属性为#000的颜色值; .class 类选择器(匹配页面特定的class) 如:.my{color:#000}则代表将页面class为my的元素添加属性为#000的颜色值; S1,S2 群组选择器(匹配包含S1,包含S2元素,匹配一个即可) 如:.my,.you{color:#000}则代表将页面class为my和class为you的元素添加属性为#000的颜色值; S1S2 合并选择器(匹配包含S1及S2的元素,该元素同时必须包含S1及S2) 如:.my.you{color:#000}则代表将页面class有my及you的元素添加属性为#000的颜色值;
2.结构选择器
S1 S2 后代选择器(S1所有的后代S2) S1>S2 子选择器(S1的子元素S2 IE7+) S1+S2 相邻兄弟选择器(S1后面的相邻兄弟元素S2 IE7+) S1~S2 通用兄弟选择器(S1后面的所有兄弟元素S2,IE7+)
【举例图示】
a.区分S1 S2及S1,S2及S1S2三类选择器;
you and meyoume you
.me,.you{ color: deeppink; } .you.me{ background: #eee; } .me .you{ color: #0f0; }
添加如上结构及样式,可得到下面的效果:
可以看出来.me,.you群组选择器即只要包含了任意一个即可生效;.me .you后代选择是只有.me的后代.you才会生效,.me.you合并选择器,是需要两个选择器都包含才会生效。
b.区分各类兄弟选择器
son1son2son3son4son other
.parent >.son{ color: #0f0; } .son1 + .son{ text-align: center; } .son1 ~ .son{ background: #eee; }
添加如上结构及样式,可得到下面的效果:
3.伪类选择器
动态伪类选择器 :link :visited :acitve(IE8+) :hover :focus(IE8+) 目标伪类选择器 :target(IE9+) 语言伪类选择器 :lang(language) ui元素状态伪类选择器(IE9+) :checked 选中态 :enabled 启用态 :disabled 禁用态 结构伪类选择器(IE9+) :first-child :last-child :root :nth-child(n) odd even :nth-last-child(n) :nth-of-type(n) :nth-last-of-type(n) :first-of-type :last-of-type :only-child :only-of-type :empty n的场景 n n*length n+length -n+length n*length+b odd even 否定伪类选择器 :not (IE9+)
【举例图示】
以上伪类选择器,结构伪类选择器在日常效果中应用最为广泛,应用恰当可以得到很多意想不到的效果。【具体效果会另开文章再更新】
4.伪元素
::first-letter 第一个字母 ::first-line 第一行文本 ::before 在元素前插入内容,但不会生成dom,可以设置样式【会在下篇文章补充说明】 ::after 在元素后插入内容,但不会生成dom,可以设置样式,常用于清除浮动【会在下篇文章补充说明】
5.属性选择器【IE7+】
E[attr] 匹配具有属性attr的元素E E[attr=val] 匹配属性attr为val的元素E E[attr|=val] 以val 或者val-开头 E[attr~=val] 属性值要包含val这个属性 E[attr*=val] 属性值中有val这个字符串就可以 E[attr^=val] 以val开头 E[attr$=val] 以val结束
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112638.html
摘要:优先级第一优先级无连接符号第二优先级空格第三优先级复杂选择器的连接符号空格表示选中所有符合条件的后代节点。后代表示选中符合条件的子节点。直接后继表示选中对应列中符合条件的单元格。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【...
摘要:优先级第一优先级无连接符号第二优先级空格第三优先级复杂选择器的连接符号空格表示选中所有符合条件的后代节点。后代表示选中符合条件的子节点。直接后继表示选中对应列中符合条件的单元格。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【...
摘要:优先级第一优先级无连接符号第二优先级空格第三优先级复杂选择器的连接符号空格表示选中所有符合条件的后代节点。后代表示选中符合条件的子节点。直接后继表示选中对应列中符合条件的单元格。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【...
阅读 1678·2021-10-13 09:39
阅读 1256·2019-08-30 13:58
阅读 1368·2019-08-29 16:42
阅读 3521·2019-08-29 15:41
阅读 2971·2019-08-29 15:11
阅读 2421·2019-08-29 14:10
阅读 3376·2019-08-29 13:29
阅读 2069·2019-08-26 13:27