CSS选择器

 css选择器（28）：

一、基本选择器（5）

1、*{}:通用选择器，匹配所有的元素

2、p{}:标签选择器,匹配所有元素p

3、.content{}:类选择器，匹配所有的class="content"的元素

4、#content{}:id选择器，匹配所有的id="content"的元素

5、E,F,G,...{}:并集选择器，匹配所有的E,F,G,...元素

二、层次选择器（4）

1、E F{}:后代选择器，匹配E中的所有F后代元素，包括孙及以下

2、E>F{}:子选择器，匹配E中所有直接子类F元素，不包括孙及以下

3、E+F{}:相邻兄弟选择器，匹配紧邻E之后的兄弟元素F

4、E~F{}:兄弟选择器，匹配E之后的兄弟元素F

三、属性选择器（6）

[attr]{}:匹配所有具有attr属性的元素

E[attr="v"]{}:匹配所有具有属性attr="v"的元素E

E[attr~="v"]{}:匹配介于属性attr="v"的元素

E[attr^="v"]{}:匹配所有具有属性attr值以"v"开头的元素

E[attr$="v"]{}:匹配所有具有属性attr值以"v"结尾的元素

E[attr*="v"]{}:匹配所有具有属性attr值包含"v"的元素

四、结构伪类选择器（13）

1、E:fisrt-child{}:匹配作为父类元素的第一个子元素E

2、E:last-child{}:匹配作为父类元素的最后一个子元素E

3、:root{}:匹配html元素

4、E F:nth-child(n){}:匹配E中的作为子元素，第n个F,(int n>=1,even,odd)

5、E F:nth-last-child(n){}:匹配E中的作为子元素，倒数第n个F,(int n>=1)

6、E:nth-of-type(n){}:匹配作为子元素的第n个E，(int n>=1,even,odd)

7、E:nth-last-of-type(n){}:匹配作为子元素的倒数第n个E，(int n>=1,even,odd)

8、E:first-of-type{}:匹配作为子元素的第一个E(E:first-of-type{}==E:nth-of-type(1){})

9、E:last-of-type{}:匹配作为子元素的最后一个E

10、E:hover{}:匹配当鼠标悬停时的样式

11、E:only-child{}:匹配父类只含一个元素并且是E

12、E:empty{}:匹配任意的一个空且不包括文本的元素E

13、E:not(F){}:匹配除F外所有E元素，eg:span:not(.cl){color:red;}