伪类

伪类的种类可以分为一下几个类别： 动态伪类（link/visited等）目标伪类（:target）语言伪类（:lang）UI状态伪类（disabled/checked/enabled）结构化伪类（nth等）对立面伪类（not。。）本文主要讲一下动态伪类 动态伪类定义在链接上面的伪类link：用来定义链接未被访问的样式visited：用来定义链接已经被访问过的样式（默认状态下是跟踪了用户的行为）定义用户行为的伪类（显示顺序hover-focus-active）hover：用来定义用户用鼠标划过对应的元素，但是未激活显示的样式focus：用来定义一个元素本身具备焦点（接受键盘、鼠标、form的输入等）之后，显示的样式active：用来定义用户按下鼠标后，但是并未离开时候的样式，通常是左侧的鼠标注意⚠️1、定义顺序：按照link-visited-hover-active的顺序设置对应的样式，才会有效2、对于div是没有focus的行为的，因为一个div没法用鼠标获得焦点，但是可以通过设置div的tabIndex。 tabIndex为负值，表示元素可以被聚焦，但是不能通过tab键导航到tabIndex为0，可以通过tab键导航到，相对顺序根据DOM的元素tabIndex为正值，可以通过tab键导航到，它的相对顺序按照tabindex 的数值递增而滞后获焦3、一个元素可能处于不同的伪类状态，比如同时处于visited和active；处于同一种状态的伪类并没有优先级移动端和PC端的区别对于hover，移动端没有hover，hover和active会合并在一起，对于键盘设备，hover这个状态不会存在浏览器的兼容性移动端safari浏览器不支持focus和active  

总结常用伪类与伪元素伪类和伪元素是为了格式化 DOM 树以外的信息而被引入的。伪类一个 CSS 伪类是以一个冒号(:)作为前缀，被添加到一个选择器末尾的关键字，可以让指定的元素在特定的状态呈现指定的样式。例如 :hover，当用户悬停在指定元素时，可以在这个状态给指定元素添加相应的样式，是在 DOM 树无法描述的状态下才能给元素添加样式。 首先，睡觉的小喵咪上方是一些没有亮的一些小灯泡 :first-child:first-child 表示在一组兄弟元素中的第一个元素。 :first-child 没有办法点亮小灯泡 <div class="bulb-lists"> <p>.bulb 的兄弟元素</p> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div></div>.bulb:first-child { background-image: url('../assets/img/light.png')!important;}:first-child 点亮第一个小灯泡 <div class="bulb-lists"> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div></div>.bulb:first-child { background-image: url('../assets/img/light.png')!important;} :first-of-type:first-of-type表示一组兄弟元素中指定类型的第一个元素。 :first-of-type 选择在父元素中第一个出现的 .bulb，而不管其在兄弟内的位置如何，点亮第一个小灯泡 <div class="bulb-lists"> <p>.bulb 的兄弟元素</p> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div></div>.bulb:first-of-type { background-image: url('../assets/img/light.png')!important;} :last-child:last-child 表示在一组兄弟元素中的最后一个元素(类似:first-child)。点亮最后一个小灯泡 :last-of-type:last-of-type表示一组兄弟元素中指定类型的最后一个元素(类似:first-of-type)。点亮最后一个小灯泡 :not一个否定伪类，用于匹配不符合参数选择器的元素。 /* 点亮不含有 .not 的灯泡*/ <div class="bulb-lists"> <div class="bulb not"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb"></div> <div class="bulb not"></div></div>.bulb:not(.not) { background-image: url('../assets/img/light.png')!important;} ...