a标签伪类选择器:
a:link{CSS样式;CSS样式} ————>修改从未被访问过的a标签样式。
a:visted{CSS样式;CSS样式} ————>修改已经被访问过的a标签样式。
a:hove{CSS样式;CSS样式} ————>修改鼠标悬浮的a标签样式。
a:active{CSS样式;CSS样式} ————>修改标签被长按的a标签样式。
Warning: 如果a标签的四个伪类选择器同时使用的话,那你一定要注意使用顺序,要不然可能没有效果。有个好记的短句子:LVHA,就是lv哈,lvha就对应着顺序,也对应着刚才我写顺序的首字母。
还有一个和a标签相关的伪类选择器:
a:target————>向点击超链接(a标签)跳转到某个元素时触发。一般都是有a标签参与。
表单元素伪类选择器:
标签名:focus{CSS样式;CSS样式} ————>输入框获得鼠标焦点时触发的样式。
标签名:checked{CSS样式;CSS样式} ————>表单元素被选中时触发。
标签名:disabled{CSS样式;CSS样式} ————>访问到所有不可用表单元素。
标签名:required{CSS样式;CSS样式} ————>访问到所有的必填表元素。
结构伪类选择器(重点)
nth-child
标签>标签下的子类标签:frist-child { CSS样式;CSS样式 }————>访问到标签下的第一个子类标签。
标签>标签下的子类标签:last-child { CSS样式;CSS样式 }————>访问到标签下的最后一个子类标签。
标签>标签下的子类标签:nth-child(number) { CSS样式;CSS样式 }————>访问到标签下的第number子类标签。
标签>标签下的子类标签:nth-child(odd) { CSS样式;CSS样式 }————>访问到标签下的所有奇数子类标签。
标签>标签下的子类标签:nth-child(even) { CSS样式;CSS样式 }————>访问到标签下的所有偶数子类标签。
标签>标签下的子类标签:nth-child(Xn+y) { CSS样式;CSS样式 }————>访问到标签下的根据公式对应的子类标签。X从0开始数。例如:3n+1找的就是第1,4,7,10,13…的子类标签。
还有很多例如访问标签下的同种类型的子类标签用:
标签>标签下的子类标签:first-of-type{ CSS样式;CSS样式 } (第一个同类型子标签的第一个)
访问同种类型的和之前的都一一对应。
这是最近抽时间做了一个简短的对于新CSS选择器的一个样式解释,也是我第一个算是入门的自我理解,一个小白需要学的东西太多了。