本文系《图解CSS3核心技术与案例实战》读书笔记
1. CSS选择器分类
- 基本选择器
- 层次选择器
- 伪类选择器
- 动态伪类选择器
- 目标伪类选择器
- 语言伪类选择器
- UI元素状态伪类选择器
- 结构伪类选择器
- 否定伪类选择器
- 伪元素
- 属性选择器
2.1 基本选择器
选择器 | 类型 | 功能描述 |
---|---|---|
* | 通配选择器 | 选择文档中所有的HTML元素 |
E | 元素选择器 | 选择所有指定类型的HTML元素 |
id | ID选择器 | 选择指定ID属性值为”id”的任意类型元素 |
.class | 类选择器 | 选择指定class属性值为”class”的任意类型的任意多个元素 |
selector1, …, selectorN | 群组选择器 | 将每一个选择器匹配的元素集合并 |
2.2 层次选择器
选择器 | 类型 | 功能描述 |
---|---|---|
E F | 后代选择器 | 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内 |
E > F | 子选择器 | 选择匹配的F元素,且匹配的F元素是所匹配的E元素的子元素 |
E + F | 相邻兄弟选择器 | 选择匹配的F元素,且匹配的F元素位于匹配的E元素后面(一个) |
E ~ F | 通用兄弟选择器 | 选择匹配的F元素,且匹配的F元素在匹配的E元素后面(所有) |
2.3 动态伪类选择器
选择器 | 类型 | 功能描述 |
---|---|---|
E:link | 链接伪类选择器 | 选择匹配的E元素,而且匹配元素定义了超链接并未被访问过。常用于链接锚点上 |
E:visited | 链接伪类选择器 | 选择匹配的E元素,而且匹配元素定义了超链接已被访问过。常用于链接锚点上 |
E:active | 用户行为伪类选择器 | 选择匹配的E元素,而且匹配元素被激活。常用于锚点和按钮上 |
E:hover | 用户行为伪类选择器 | 选择匹配的E元素,而且用户鼠标停留在元素E上 |
E:focus | 用户行为伪类选择器 | 选择匹配的E元素,而且匹配的元素获得焦点 |
2.4 目标伪类选择器
选择器 | 功能描述 |
---|---|
E:target | 选择匹配E的所有元素,且匹配元素被相关URL指向,通常E的ID属性值与target相同 |
2.5 语言伪类选择器
选择器 | 功能描述 |
---|---|
E:lang(language) | 选择匹配元素指定了lang属性,而且其属性值为language |
2.6 UI元素状态伪类选择器
选择器 | 类型 | 功能描述 |
---|---|---|
E:checked | 选中状态伪类选择器 | 匹配选中的复选按钮或单选按钮 |
E:enabled | 启用状态伪类选择器 | 匹配所有启用的表单元素 |
E:disabled | 不可用状态伪类选择器 | 匹配所有禁用的表单元素 |
2.7 结构伪类选择器
选择器 | 功能描述 |
---|---|
E:first-child | 作为父元素的第一个子元素E,与E:nth-child(1)等同 |
E:last-child | 作为父元素的最后一个子元素E,与E:nth-last-child(1)等同 |
E:root | 选择匹配元素E所在文档的根元素。在HTML文档中,根元素始终是html,此时该选择器与html类型选择器匹配的内容相同 |
E:nth-child(n) | 作为父元素的第n个子元素E |
E:nth-last-child(n) | 作为父元素的倒数第n个子元素E |
E:nth-of-type(n) | 选择父元素内具有指定类型的第n个E元素 |
E:nth-last-of-type(n) | 选择父元素内具有指定类型的倒数第n个E元素 |
E:first-of-type | 选择父元素内具有指定类型的第一个E元素 |
E:last-of-type | 选择父元素内具有指定类型的最后一个E元素 |
E:only-child | 选择父元素只包含一个子元素,且该子元素匹配E元素 |
E:only-of-type | 选择父元素只包含一个指定类型的子元素 |
E:empty | 选择没有子元素的元素,且该元素也不包括任何文本内容 |
2.8 否定伪类选择器
选择器 | 功能描述 |
---|---|
E:not(F) | 匹配所有除元素F外的E元素 |
2.9 伪元素
选择器 | 功能描述 |
---|---|
::first-letter | 匹配文本块的第一个字母 |
::first-line | 匹配文本块的第一行文本 |
::before | 匹配额外插入的位置 |
::after | 匹配额外插入的位置 |
::selection | 匹配选中的文本 |
2.10 属性选择器
选择器 | 功能描述 |
---|---|
E[attr] | 匹配具有属性attr的E元素,E元素省略表示选择定义了attr属性的任意元素 |
E[attr=val] | 匹配具有属性attr,且属性值为val(区分大小写)的E元素 |
E[attr|=val] | 匹配具有属性attr,且属性值具有val或以val开始(val为完整字符串),常用于lang属性 |
E[attr~=val] | 匹配具有属性attr,且属性值为多个空格分隔的值,其中一个等于val |
E[attr*=val] | 匹配具有属性attr,且属性值任意位置包含val |
E[attr^=val] | 匹配具有属性值attr,且属性值以val开始 |
E[attr$=val] | 匹配具有属性值attr,且属性值以val结尾 |