第六章：CSS——伪类元素

6.1 ::after/::before

实现红框中的代码：

<span class="icon"></span><span class="words">主页</span>

.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(https://qgt-document.oss-cn-beijing.aliyuncs.com/P3-2-HTML-CSS/1.2/source/first-page.png) no-repeat center;
    background-size: contain;
    vertical-align: top;
    margin-right: 8px;
}
.words {
    font-size: 18px;
    line-height: 24px;
}

使用伪元素进行书写：

<span>主页</span>

/* 在span之前添加行内元素 */
span::before {
  content: '';
  /* 将添加的行内元素定位，并设置大小、背景 */
    position: absolute;
    left: 0px;
    width: 24px;
    height: 24px;
    background: url(https://qgt-document.oss-cn-beijing.aliyuncs.com/P3-2-HTML-CSS/1.2/source/first-page.png) no-repeat center;
    background-size: contain;
}

伪元素就是利用css 代码在标签内部的前面，或者后面添加一个行内元素，这个行内元素你可以理解为span 。 其中conten:" "为占位符号。

6.2 清除浮动

常用方法：在父类名中加上clearfix

CSS中添加:

.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

HETL中添加：

<!-- 添加清除浮动类名 -->
<div class="father-one clearfix">
    <div class="son-one">son-one</div>
    <div class="son-two">son-two</div>
    <div class="son-three">son-three</div>
</div>

6.3 事件伪类

定义：鼠标移动到某个区块上的时候，该区块发生CSS样式的变化，即为事件伪类。

hover————鼠标移动上去

使用：

li:hover{
    background-color: #47A0FC;
    color: white;
}

该代码的作用是当鼠标移动懂li标签的内容时，li标签的背景变为蓝色，字体颜色变为白色。

一个标签上可以添加多个hover，如果两次标签添加的属性相同，则后面的会覆盖前面的。

通过父元素改变子元素

div:hover>span{
    background:blue;
}

active————鼠标点击时

使用：

ul>li:active{
    /* 要改变的效果 */
    color: black;
}

该代码的作用是当鼠标点击li标签的内容时，li标签字体颜色变为黑色。 注意书写时，hover需要写在active之前才会生效。

foucus————获取焦点后

focus:获取焦点的伪类，一般用于具有焦点的元素，比如input,比如我们可以让 input 获取到焦点以后，改变input的边框颜色。

6.4 列表伪类

1.匹配父元素中的第一个子元素——first-child

例如：

ul>li:first-child{
    background-color: #3687FC;
    color: #FFFFFF;
}

2.匹配父元素中的最后一个子元素——last-child

例如：

ul>li:last-child{
    background-color: #3687FC;
    color: #FFFFFF;
}

3.匹配父元素中第n个子元素——nth-child(n)

例如：

ul>li:nth-child(2){
    background-color: #3687FC;
    color: #FFFFFF;
}

括号中的数字还可以写odd（奇数）、even（偶数）。