一、css选择器分类
二、选择器语法
1、基本选择器语法
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| * | 通配选择器 | 选择文档中的所有HTML元素,如：*{margin:0} |
| E | 元素选择器 | 选择指定类型的HTML元素，如：p{font-size:16px} |
| id | ID选择器 | 选择指定ID属性值为’id’的任意类型元素,如: #myDiv:{width:200px} |
| .class | 类选择器 | 选择指定class属性值为’class’的任意类型的任意多个元素,如：.red{color:red} |
| selector1,selectorN | 群组选择器 | 将每一个选择器匹配的元素集合,如:p，div{color:red} |
2、层次选择器
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E F | 后代选择器 | 该选择器定位元素E的后代中所有元素F，如: ul li{color:red} |
| E>F | 子选择器 | 该选择器定位元素E的直接子元素中的所有元素F |
| E+F | 相邻兄弟选择器 | 该选择器定位与元素E有相同父元素且紧邻元素E的元素F |
| E~F | 一般兄弟选择器 | 该选择器定位与元素E有相同父元素且位于E之后的所有元素F |
3、动态伪类选择器
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E:link | 链接伪类选择器 | 该选择器匹配元素E被定义了超链接并未被访问过。常用于链接描点上 |
| E:visited | 链接伪类选择器 | 该选择器匹配元素E被定义了超链接并已被访问过。常用于链接描点上 |
| E:active | 用户行为选择器 | 该选择器匹配元素E被被激活。常用于链接描点和按钮上 |
| E:hover | 用户行为选择器 | 该选择器匹配元素E且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover |
| E:focus | 用户行为选择器 | 该选择器匹配元素E且而且匹配元素获取焦点 |
注：a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
4、目标伪类选择器
| 选择器 | 功能描述 |
|---|---|
| E:target | 该选择器匹配相关URL指向的E元素 |
5、UI元素状态伪类选择器
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E:checked | 选中状态伪类选择器 | 匹配选中的复选按钮或者单选按钮表单元素 |
| E:enabled | 启用状态伪类选择器 | 匹配所有启用的表单元素 |
| E:disabled | 不可用状态伪类选择器 | 匹配所有禁用的表单元素 |
6、结构伪类选择器
| 选择器 | 功能描述 |
|---|---|
| E:fisrt-child | 父元素的第一个子元素E，与:nth-child(1)相同； |
| E:last-child | 父元素的倒数第一个子元素E |
| E:root | 根元素，始终指html元素； |
| E F:nth-child(n) | 该选择器定位元素E的第n个子元素的元素F： |
| E F:nth-last-child(n) | 该选择器定位元素E的倒数第n个子元素的元素F； |
| E:nth-of-type(n) | 该选择器定位元素E的第n个指定类型子元素； |
| E:nth-last-of-type(n) | 该选择器定位元素E的导数第n个指定类型子元素： |
| E:first-of-type | 与:nth-of-type(1)相同； |
| E:last-of-tye | 与:nth-last-of-type(1)相同； |
| E:only-child | 父元素中唯一的子元素E |
| E:only-of-type | 父元素中唯一具有该类型的元素E； |
| E:empty | 没有子元素的元素，没有子元素包括文本节点； |
注：:nth-child(odd) 选择的是奇数项，而使用:nth-last-child(odd) 选择的却是偶数项
7、否定伪类选择器
| 选择器 | 功能描述 |
|---|---|
| E:not(F) | 匹配所有除元素F外的E元素 |
8、属性选择器
| 选择器 | 功能描述 |
|---|---|
| E[attr] | 该选择器定位具有属性attr的任何元素E; |
| E[attr=value] | 该选择器定位具有属性attr且属性值为value的任何元素E; |
| E[attr | =value] |
| E[attr^=value] | 该选择器定位具有属性attr且属性值以value开头的任何元素E; |
| E[attr*=value] | 该选择器与E[attr~=value]相似，但更进一步，定位具有属性attr且属性值任意位置包含val的元素E，value可以是一个完整的单词，也可以是一个单词中的一部分; |
| E[attr$=value] | 该选择器与E[attr^=value]正好相反，定位具有属性attr且属性值以value结尾的任何元素E; |
| E[attr~=value] | 该选择器定位具有属性attr且属性值为完整单词 value 的任何元素E; |
9、伪元素
| 选择器 | 功能描述 |
|---|---|
| :first-line | 匹配文本首行; |
| :first-letter | 匹配文本首字母; |
| :before 与:after | 使用 contnet 属性生成额外的内容并插入在标记中; |
| :selection | 匹配突出显示的文本; |
