伪元素–::before和::after
如果想在某一标签元素后面 ,添加一个新的元素,可以使用伪元素 ::before和::after
其作用是在元素后添加新的伪元素
写法是 选择器::after/before
/* 在span之前添加行内元素 */
span::before {
/* 使用空白符号占位 */ content: '';
/* 将添加的行内元素定位,并设置大小、背景 */
position: absolute;
left: 0px;
width: 24px;
height: 24px;
background: url(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
来选取第一个和最后一个标签