选择器及其权重

 

*	通配符
div	元素选择器
div,p	多元选择器
.box	类选择器
#box	id选择器
div p	后代选择器
div>p	子代选择器
div+div	相邻兄弟选择器

属性选择器：

E[att]	选取带有att属性的元素
E[att="val"]	选取带有att属性且值为val的元素
E[att~="val"]	选取带有att属性且值包含val词汇的元素
E[att|="val"]	选取带有att属性且值以val词汇开头的元素
E[att^="val"]	选取带有att属性且值以val开头的元素
E[att$="val"]	选取带有att属性且值以val结尾的元素
E[att*="val"]	选取带有att属性且值包含val的元素

伪类选择器：

E:link	未被访问链接的样式
E:visited	已被访问链接的样式
E:hover	鼠标指针悬浮于链接上时链接的样式
E:active	鼠标在链接上按下未弹起时链接的样式
E:focus	元素获取焦点显示的样式

结构伪类选择器：

E:first-child	选择第一个元素
E:last-child	选择最后一个元素
E:nth-child(n)	选择第n个元素，从0开始计数
E:nth-child(even)	选择偶数元素
E:nth-child(odd)	选择奇数元素
E:nth-child(与n相关的公式)	从0开始计数，第0个元素或者超出了元素个数会被忽略
E:first-of-type	选择指定类型元素的第一个
E:first-of-type	选择指定类型元素的最后一个
E:nth-of-type(n)	选择指定类型元素的第n个

 nth-child与nth-of-type的区别：

nth-child：对父元素里的所有孩子排序，先找到第n个孩子，然后再看是否和E匹配

nth-of-type：对父元素里的所有指定子元素排序，先去匹配E，然后在找第几个孩子

伪元素选择器：

E::before	在元素内部前面插入内容
E::after	在元素内部后面插入内容

注意：

1.创建的元素是行内元素

2.创建的元素文档中不存在

3.必须有content属性

选择器的权重

选择器	权重
继承和星号（*）	0，0，0，0
元素，伪元素选择器	0，0，0，1
类，属性，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式	1，0，0，0
！important	无穷大

注意：

1.复合选择器是权重相加（只会叠加不会进位）

2.权重相同，就近原则