CSS伪类

• ， 11 3月 2021
• 作者 847954981@qq.com
• 前端学习

CSS伪类

伪元素–::before和::after

如果想在某一标签元素后面 ，添加一个新的元素，可以使用伪元素 ::before和::after

其作用是在元素后添加新的伪元素

写法是 选择器::after/before

/* 在span之前添加行内元素 */
span::before {
 /* 使用空白符号占位 */　　content: '';
  /* 将添加的行内元素定位，并设置大小、背景 */
    position: absolute;
    left: 0px;
    width: 24px;
    height: 24px;
    background: url(ＵＲＬ) no-repeat center;
    background-size: contain;
}

事件伪类

鼠标移入—:hover

当需要鼠标移入之后改变某一标签内内容的样子，可以在CSS中添加 :hover 伪类 如：

div{
  background-color:red
}
div:hover{
  background-color:yellow
}

如此

除此之外，事件伪类还有很多

如 :active—-鼠标点击 :focus—-获取焦点

列表伪类

当在一标签下存在数个同一标签名的子标签 可以通过 父标签>子标签:nth-child(n)(其中后面一个n为数字，表示第n个标签）来选取子标签以此达到同一修改或者个别修改的效果。

除了nth-child(n) 还有 first-child 和 last-child 来选取第一个和最后一个标签