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 | 不可用状态伪类选择器 | 匹配禁用状态的表单元素 |