伪类（：hover，：before，：after，：focus）

一：伪类

伪类是可以添加到选择器上的关键字，用来选择元素的指定（悬停）状态。

1.：hover
超链接可以使用:hover伪类选择器定义它的悬停状态样式。
链接现在为黑色，当鼠标移到a时，会显示红色；

例2：当鼠标悬停在按钮上时，也会改变按钮的颜色；

button {
   	border-radius: 5px;
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200613005749858.png)color: white;
    background-color: #0F5897;
    padding: 5px 10px 8px 10px;
}
button:hover {
	background-color:red;
}

2：before 和：after

：before用来在选择元素之前添加一些内容。
：after用来在选择元素之后添加一些内容。

:before和:after必须配合content来使用。这个属性通常用来给元素添加内容诸如图片或者文字。当:before和:after伪类用来添加某些形状而不是图片或文字时，content属性仍然是必需的，但是它的值可以是空字符串。

.heart{}
.heart:before{background-color: pink; content: "";}
.heart:after{background-color: red; content: "";}

如果before或者after中没有content，则无法显示出

例2：

：before 在每个 <p> 元素前面插入内容，并设置所插入内容的样式：

<style>
p:before
{
content:"台词：";
background-color:yellow;
color:red;
font-weight:bold;
}
</style>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>

例3：

：after 在每个 <p> 元素后面插入内容，并设置所插入内容的样式：

<style>
p:after
{
content:"- 台词";
background-color:yellow;
color:red;
font-weight:bold;
}
</style>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>

3：focus

通过给标签添加 tabindex 属性，使标签获得焦点，当点击该标签时或者按 Tab 键时，该标签就会获得焦点；
在页面中使用 tab 键时，有些标签，如：链接、表单控件，可以自动获得焦点；
通过将 tabindex 属性值设为 0，来给其他标签赋予相同的功能，如：div、span、p等；
tabindex 为负整数（通常为 -1）的标签也有焦点的，但是不可以通过 tab 键来获得焦点。
tabindex 使用 tab 键获得焦点的顺序： tabindex = “1” -> tabindex = “2” ->tabindex = “3”
直到回到默认的或 tabindex 值为 0 的标签上，如此循环。，

<style>
  p:focus {
    background-color: yellow;
  }
  </style>
<p tabindex="0" >Instructions: Fill your information then click </p>
// 为标签P添加tabindex属性，获得焦点；

当点击该 p 标签时，或者使用 Tab 键时，该 p 标签就会获得焦点：