之前学的的迷糊了，也不知道什么会什么不会了，跑去面试了。别人列出一堆css选择器，本以为选择器没啥的，结果到那个多类选择器翻车了，.a.b选择同时含a,b类名的，很尴尬所以回来仔细整理了一下。目前根据W3C手册所知，选择器一共44个，特此分类记录复习一下(分类依据可能不合理，只是为了方便自己记忆)
一.基本选择器(4个)
| 选择器 |
选择目标 |
css |
| * |
通配符,选择所有元素 |
2 |
| .class |
类选择器，选择类名为class的元素 |
1 |
| #ID |
id选择器，选择id为ID的元素 |
1 |
| element |
元素选择器，选择element元素 |
1 |
二.结合选择器(6个)
| 选择器 |
选择目标 |
css |
| .a.b |
多类选择器，选择同时拥有类名为a,b的元素 |
|
| a b |
后代选择器 ，选择a元素后代的所有b元素 |
1 |
| a,b |
同级选择器 ，选择a元素和b元素 |
1 |
| a>b |
子代选择器，选择a元素的直接子代b |
2 |
| a+b |
直接相邻兄弟选择器，选择紧跟着a元素的b元素 |
2 |
| a~b |
通用兄弟选择器，选择前面有a的所有b元素 |
3 |
| 注意事项: 1. 相邻兄弟选择器，之间可以有文本元素，不影响，其它不可。2.在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。 |
|
|
三.伪元素(4个)
| 选择器 |
选择目标 |
css |
| :first-letter |
选择首字 |
1 |
| :first-line |
选择首行 |
1 |
| :before |
在元素之前插入 |
2 |
| :after |
在元素之后插入 |
2 |
| 注意事项: 1. 所有伪元素都必须放在该伪元素选择器的最后面 2. 伪元素是一种假想的元素，插入到页面中代替某个元素但是并不出现在文档源代码中，由用户代理动态构建。 |
|
|
四.属性选择器(7个)
| 选择器 |
选择目标 |
css |
| [attr] |
简单属性选择器，选择含有attr属性的元素 |
2 |
| [attr=value] |
具体值属性选择器，选择attr属性值等于value的元素 |
2 |
| [attr~=value] |
选择attr属性中含有value词条的元素 |
2 |
| [attr|=value] |
选择attr属性以value-开头，或者等于value的元素 |
2 |
| [attr*=value] |
子串匹配，选择attr属性子串包含value的所有元素 |
3 |
| [attr^=value] |
选择attr属性以value开头的元素 |
3 |
| [attr$=value] |
选择attr属性以value结尾的元素 |
3 |
五.伪类(23个)
表单相关(3)
| 选择器 |
选择目标 |
css |
| :checked |
选中的input元素 |
3 |
| :disabled |
选中禁用的input元素 |
3 |
| :enabled |
选中启用的input元素 |
3 |
超链接相关,love-focus-hate.(5)
| 选择器 |
选择目标 |
css |
| :link |
未被访问的连接 |
3 |
| :visited |
已经被访问的连接 |
3 |
| :focus |
获取焦点的元素 |
3 |
| :hover |
鼠标悬浮的元素 |
3 |
| :actived |
活动的元素 |
3 |
同一父元素下的目标选择(9)
| 选择器 |
选择目标 |
css |
| p:only-child |
选择其父元素下的唯一子元素p下的所有元素 |
3 |
| p:only-of-type |
选择属于其父元素唯一的 p元素的每个 p元素 |
3 |
| p:first-of-type |
选择属于其父元素的首个p 元素的每个 p 元素。 |
3 |
| p:last-of-type |
选择属于其父元素的最后 p元素的每个 p元素 |
3 |
| p:nth-child(n) |
选择属于其父元素的第n个子元素的每个 p 元素 (n从1开始) |
3 |
| p:nth-last-child(n) |
从最后一个子元素开始计数 |
3 |
| p:nth-of-type(n) |
选择属于其父元素第n个p元素的每个p元素 |
3 |
| p:nth-last-of-type(n) |
从最后一个元素开始计数 |
3 |
| p:last-child |
选择属于其父元素最后一个子元素每个p元素 |
3 |
其它(6)
| 选择器 |
选择目标 |
css |
| :root |
选择文档根元素 |
3 |
| :lang(language) |
选择带有以 "language" 开头的 lang 属性值的元素 |
2 |
| :empty |
选择没有子元素的元素(包括文本节点) |
3 |
| :target |
选择当前活动的元素，锚点指向的元素 |
3 |
| :not(selector) |
选择非某个元素的所有元素 |
3 |
| ::selection |
选择被用户选取的元素部分 |
3 |
六.CSS权重
- 最高级别!important
- 行内式 1000
- ID选择器 100
- 类选择器、伪类、属性选择器 10
- 元素选择器、伪元素 1
- 其它为0
