伪类选择器的相关学习

伪类选择器:

根据元素的位置或状态来匹配相关元素,相比标签/属性/上下方选择器相比,其最大的优势是,不用在原始的html文件上做额外操作.

结构伪类:依据元素的位置来选择

核心结构是:nth-child(an + b)
an+b里,需要设置好a和b两个值,n是一个从1到大的变量,an+b计算出来的值就是选中的第几个元素的值,如3n+2,则n=1,值为5,n=2里,值为8,则代表着选择的是子元素中的第5,8,11等连续项

在其基础上,语法糖对第一个,最后一个,偶数项,奇数项,做了分别

• :firsh-child 第一个元素
• :last-child 最后一个元素
• :nth-child(even) 偶数元素
• :nth-child(odd) 奇数元素

同时,如果倒着取,则用nth-last-child(an + b)结构就好

状态伪类:根据当前伪类的元素状态来设置

主要用在鼠标或键盘事件处理响应上,即所见即所操作,主要用在链接和表单上.包括以下几项:看字面意思就好
:focus
:hover
:checked
:required
:enabled
:diaabled
:not():排除一些项目
:enpty()

.login input[type=”checkbox”]:checked +label{
color: blue;
}

这个代码的意思是,选择class为login的后代(空格为后代,>为子代)中type=”checkbox”的input在checked状态时,选择它的兄弟元素label标签中的内容,让它显示为红色