css选择器总结

一、基础选择器：

1.类选择器：class   符号为 . 意味某一类
2.ID选择器：id   符号为# 意味某一个

二、组合选择器

1.E,F  多元素选择器：既匹配E又匹配F
2.E F 后代选择器：匹配E后面的所有F（嵌套肯定有另外的写法，不必管）
3.E>F 子元素选择器：匹配E下的第一代F（嵌套肯定有另外的写法，不必管）
4.E+F 直接相邻选择器：匹配E同邻的第一个兄弟元素F（嵌套肯定有另外的写法，不必管）
5.E~F 普通相邻选择器：匹配E同龄的兄弟元素F（若F是多个，那么都算）
6. .class1.class2#id1：class和id选择器可以连写，其符号即为他们之间的分割

三、属性选择器

E(attr)：匹配具有属性attr的元素  div[id]就能取到所有id属性的div
E(attr=value)：匹配属性attr值value的元素， div[id=test]的div，匹配id=test的div
E[attr~=value]：匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
E[attr^=value]：匹配属性attr的值以value开头的元素
E[attr$=value]：匹配属性attr的值以value结尾的元素
E[attr*=value]：匹配属性attr的值包含value的元素

四、伪类选择器

E:first-child   匹配元素E的第一个子元素
E:nth-child(n)  匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)与nth-child()作用类似，但是仅匹配同种标签的元素（一个是父元素的第几个孩子，一个是同类别的第几个同伴）
E:nth-last-of-type 与nth-last-child()作用类似，但是仅匹配同种标签的元素
E:last-child    匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type  匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child    匹配父元素下仅有的一个子元素，等同于:first-child:last-child或:nth-child(1):nth-last-child(1)
E:only-of-type  匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或nth-of-type(1):nth-last-of-type(1) 

n的取值
1,2,3,4,5,6
2n+1,2n,4n-1
odd（奇数）,even(偶数)

E:link          匹配所有未被点击的链接
E:visited       匹配所有已被点击的链接
E:active        匹配鼠标已经将其按下、还没有释放的E元素
E:hover         匹配鼠标悬停其上的E元素
E:focus         匹配获得当前焦点的E元素
E:lang(c)       匹配lang属性等于c的E元素
E:enabled       匹配表单中可用的元素
E:disabled      匹配表单中禁用的元素
E:checked       匹配表单中被选中的radio或checkbox元素
E::selection    匹配用户当前选中的元素
E:root         匹配文档的根元素，对于HTML文档，就是HTML元素

五、伪元素选择器

E::first-line   匹配E元素内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容

六、css优先级

1.!important
2.内联样式（标签行内的属性内联样式）
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义

复杂场景abcd 数其个数