结构选择器:
1.选择第一个
1.1 父元素>子元素1:first-child {}
选择父元素中第一个子元素,并且与子元素1是相同的
1.2 父元素>子元素1:first-of-type {}
先将父元素中的子元素按照标签名进行分类,然后在对应类别中选择第一个子元素1
2.选择最后一个
2.1 父元素>子元素1:last-child {}
选择父元素中最后一个子元素,
并且与子元素1是相同的
2.2 父元素>子元素1:last-of-type {}
先将父元素中的子元素按照标签名进行分类,
然后在对应类别中选择最后一个子元素1
3.选择第几个
3.1 父元素>子元素1:nth-child(num) {}
选择父元素中第num个子元素,并且与子元素1是相同的
3.2 父元素>子元素1:nth-of-type(num) {}
先将父元素中的子元素按照标签名进行分类,
然后在对应类别中选择第num个子元素1
注释:num的选值
odd/2n+1 奇数
even/2n 偶数
num1*n+num2 =>从num2开始,以num1为一个循环
4.除了满足条件的之外的元素
元素:not(条件) 条件:选择器
伪类选择器:
1. 元素1:hover 设置悬停时的样式 元素1:鼠标悬停的区域
注 如果:hover后面有其他选择器,则代表样式设置的对象是后面选择器选中的元素
eg: .item4:hover a {} 鼠标悬停:item4 样式作用对象 a
2.:link 未被访问 :hover 鼠标悬停 :active 正在被访问 :visited 已被访问
超链接书写顺序::link :visited :hover :active
3::focus 获取焦点设置样式
伪元素选择器:
1:元素1::before 在元素1设置第一个子元素,必须与content属性连用,默认是行元素
2:元素1::after 在元素1设置最后一个子元素,必须与content属性连用,默认是行元素
3:元素1::first-letter 选择元素中第一个字或字母,元素1要是块元素
4:元素1::first-line 选择元素中第一行,元素1要是块元素
属性选择器:
1.元素1[属性1] 选择带有属性1的元素1
2.元素1[属性1=属性值1] 选择带有属性1并属性值为属性值1的元素1
3.元素1[属性1*=字符串1] 选择带有属性1并属性值包含字符串1的元素1
4.元素1[属性1^=字符串1] 选择带有属性1并属性值以字符串1开头的元素1
5.元素1[属性1$=字符串1] 选择带有属性1并属性值以字符串1结尾的元素1
复合选择器:
并集:可以同时设置多个元素 元素1,元素2 {}
交集:多个选择组合,选中相同的元素
*、兄弟、相邻等 0,0,0,0
标签选择器 0,0,0,1
类别、属性选择器 0,0,1,0
ID选择器 0,1,0,0
内联样式 1,0,0,0
!important 1,0,0,0,0
组合选择器 各类相加,但不进位
选择器优先级:!important>内联选择器>ID选择器>类别选择器>属性选择器>伪类>元素选择器>通配符选择器>继承选择器