常用的选择器

常用的选择器

一、基本的选择器

1、* 通用元素选择器

2、E 标签选择器

3、.info class选择器

4、#info id选择器

二、组合选择器

1、E,F 多种元素选择器 div，p{ }

2、E F 后代选择器 li a{}

3、E>F E元素的下一级中的所有F元素 div>p{}

4、E+F 与E元素相毗邻的F元素（紧随其后的下一个同级元素）

5、E+F 与E元素所有同级的F元素

三、属性选择器

1、E[att] 匹配所有具有att属性的E元素，不考虑值 a[title]{}

2、E[att=val] 匹配所有具有att属性 且值为“val”的E元素 a[title=\"aa\"]

3、E[att*=val] 匹配所有具有att属性 且值包含“val”（不间断）的E元素

4、E[att^=val] 匹配所有具有att属性 且值以“val”开始 的E元素

5、E[att$=val] 匹配所有具有att属性 且值以“val”结尾 的E元素

6、E[att~=val] 匹配所有具有att属性 且值包含“val” 单词（前后空格隔开）的E元素

四、伪类选择器

1、E:link

2、E:visited

3、E:active

4、E:hover

5、E:focus

6、E:blur

7、E:first-child 匹配E元素父级元素的第一个子元素（如果E元素的父级元素多个子元素中还有多个子元素的，则也匹配这个子元素下的第一子元素）【思考如果E元素的父级元素下第一个子元素含有多个元素？？】

8、E:last-child

9、E:first-line 匹配E 的 第一个子元素

10、first-of-type 其父元素的第一个p元素

11、last-of-type 其父元素的最后一个p元素

12、nth-child(n)其父元素的第n个元素（如：pnth-child(2){colorred;} p元素是其父元素的第2个元素的话字体颜色就是红色）

13、nth-last-child(n) 其父元素的倒数第n个元素

14、nth-of-type(n) （如：pnth-of-type(2){colorred;} p元素是其父元素的第2个p元素的话字体颜色就是红色）

15、nth-last-of-type(n) （如：pnth-last-of-type(2){colorred;} p元素是其父元素的倒数2个p元素的话字体颜色就是红色）