一个容易被忽视的css选择器

之前学的的迷糊了，也不知道什么会什么不会了，跑去面试了。别人列出一堆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

转载于:https://www.cnblogs.com/zming-hua/p/7577331.html