属性选择器:
选择到元素/标签里面的属性 - 针对于有默认属性的标签进行设置
标签名字[属性] 选择标签和属性
标签名字[属性='属性值'] 选择标签和属性,并且规定属性值
标签名字[属性~='属性值'] 选择标签和属性值,有这个属性值就可以被选择到~
标签名字[属性^='属性值'] 选择标签和属性值,以这个字符开头的就可以被选择到^
标签名字[属性$='属性值'] 选择标签和属性值,以这个字符结束就可以被选择到$
标签名字[属性*='属性值'] 选择标签和属性值,只要有这个字符就可以被选择到*
标签名字[属性|='属性值'] 选择标签和属性值,属性值是value或者value-xxx可以被选择到
结构选择器:
结构选择器是伪类选择器 全面叫结构性伪类选择:针对于标签 一定要有标签顺序
1.当标签名都一样的时候,有顺序的时候
标签名称的集合:first-child{} 选中集合第一个
标签名称的集合:last-child{} 选中集合的最后一个
标签名称的集合:nth-child(n){} 选中第几个
标签名称的集合:nth-last-child(n) 从后面往前面选择
n是默认值:表示选中全部 2n 3n
2.当标签名称不一样的使用,把child更改为-of-type就可以
先把相同标签筛选到一起变成一个集合 再从集合中进行选择
标签名称的集合:fist-of-type{} 先筛选相同的标签组成一个集合,选择集合的第一个
标签名称的集合:last-of-type{} 先筛选相同的标签组成一个集合,选中集合的最后一个
标签名称的集合:nth-of-type(n){} 先筛选相同的标签组成一个集合,选中第n个子级元素
标签名称的集合:nth-last-of-type(n){} 先筛选相同的标签组成一个集合,从后面往前面选中第几个子级元素
当标签名称一样的时候 :nth-child(){}
当标签名称不一样的时候 :nth-of-type(){}
目标选择器
目标伪类选择器(伪类选择器-目标选择器)
结合锚点进行实现的
目标伪类的使用:target 哪个元素改变就给哪个元素添加就可以了
层级选择器:
子代选择器:ul>li 选择ul下面的li
hover 鼠标滑入/滑过时候改变元素状态
改变相邻的同级元素+ ~两个不一样的
+表示的是改变相邻的一个
~表示的改变相邻的所有元素