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

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

---

一、基本选择器

选择器	类型	功能描述
*	通配选择器	选择文档中所有的html元素
E	元素选择器	选择指定的类型的html元素
id	ID选择器	选择指定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	不可用状态伪类选择器	匹配禁用状态的表单元素