CSS 选择器

一、基础选择器

选择器	简介	用法
标签选择器	可以设置所有相同的标签的属性	p{}
类选择器	可以设置一个或多个标签	.nba{}
id选择器	每个html文档中只能出现一次	#cba{}
通配符选择器	设置所有标签	*{}
后代选择器	选择父元素里任意层级的子元素	ul li{}
子元素选择器	选择父元素里第一级的子元素	ul>li{}
并集选择器	选择多组标签，集体定义相同样式	p,div{}

二、属性选择器

选择器	简介
E[att]	选择具有att属性的E元素
E[att="val"]	选择具有att属性且属性值等于val的E元素
E[att^="val"]	匹配具有att属性、且值以val开头的E元素
E[att$="val"]	匹配具有att属性，且值以val结尾的E元素
E[att*="val"]	匹配具有att属性、且值中含有val的E元素

三、链接伪类选择器

选择器	简介
a:link	未点击时
a:visited	点击后访问过
a:hover	鼠标放上去时
a:active	鼠标按住不放时

为保证选择器生效，请按以上顺序声明

四、:focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素

五、结构伪类选择器

选择器	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中最后一个子元素E
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

nth-child(n)：

1、n可以是数字、关键字和公式

2、n如果是数字，就是选择第几个

3、常见的关键字有even偶数 odd奇数

4、常见的公式如下（如果n是公式，则从0开始计算）

5、但是第0个元素或者超出了元素的个数会被忽略

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15....
n+5	从第五个开始（包含第五个到最后）
-n+5	前五个（包含第五个）...

总结：:nth-child(n) 选择父元素里面的第n个孩子，它不管里面的孩子是否是同一种类型

六、伪元素选择器

选择器	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

1、before和after必须有content属性

2、before在内容的前面，after在内容的后面

3、before和after创建一个元素，但是属于行内元素

4、因为dom里面看不见刚才创建的元素，所以我们称为伪元素

七、选择器的权重

选择器	权重
继承或者通配符*	0,0,0,0
元素选择器，伪元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内样式 style=	1,0,0,0
！important	无穷大

1、权重是有4位数字组成的但不会有进位

2、可以理解为类选择器大于元素选择器id选择器大于类选择器以此类推

3、等级判断从左向右，如果某一位数值相同，则判断下一位数值

4、可以简单的记为，通配符和继承权重为0，元素选择器和伪元素选择器为1，类和伪类选择器为10，id选择器为100行内样式表为1000，！important为无穷大

5、继承的权重为是0如果该元素没有直接被选中不管父元素的权重为多高，子元素的权重都是0