* | 通配符 |
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.权重相同,就近原则