CSS 伪类选择器active

当用户激活元素时，CSS：活动选择器会更改HTML元素的样式。此选择器通常向用户提供已单击元素的确认。：主动选择器最常用于<a>和<button>元素，但可用于所有元素。

如果正在使用多个CSS伪选择器，则：active选择器必须位于：hover选择器之后。

在下面的示例中，当用户单击链接时，文本颜色将从黑色变为红色，直到单击操作停止。

a {
  color: black;
 }

 a:active {
  color: red;
 }

CSS 伪类选择器focus

:focus表示已接收焦点状态的元素，由键盘事件触发。触发操作来自按TAB键，可在视觉上围绕元素创建环。

句法

:focus

例

a:focus {
  color: red;
 }

：focus CSS伪类用于选择具有焦点的元素（例如表单输入）。

通常在用户单击或点击元素或使用键盘的“tab”键选择它时触发。

句法：

:focus

例

HTML：

<form>
  <input type="text" value="The background will turn yellow when you click on it.">
 </form>

CSS：

input:focus {
   background-color: yellow;
 }

CSS伪类选择器hover

当你使用指针设备（通常是鼠标指针）与元素（选择器）交互时，会触发selector:hover伪类。悬停在其上的元素的样式将被selector:hover定义的样式覆盖selector:hover伪类。要正确设置链接/元素的样式，应按顺序定义规则： - ：link - ：visited - ：hover - ：active

句法：

selector:hover {
    css declarations;
 }

更多例子

下面是一些更复杂的示例，说明了如何使用:hover伪类。请记住， .second DIV 必须出现在后.first在所有的这些例子格。

当您将鼠标悬停在元素上时会更改相邻的兄弟元素。

<style>
  .first:hover + .second {
    background-color: blue;
  }
 </style>

 <div class="first">First</div>
 <div class="second">Second</div>

上面的代码将背景颜色改变.second ，当你将鼠标悬停在蓝色.first 。

当您将鼠标悬停在某个元素上时，会更改一般兄弟。

<style>
  .first:hover ~ .second {
    background-color: blue;
  }
 </style>

 <div class="first">First</div>
 <div class="middle">Middle</div>
 <div class="second">Second</div>

这个例子提供了更多的灵活性，因为两个元素不再必须直接相邻。

当您将鼠标悬停在元素上时，请更改直接后代。

<style>
  .first:hover > .second {
    background-color: blue;
  }
 </style>

 <div class="first">
  First
  <div class="second">Second</div>
 </div>

上面的代码将背景颜色改变.second ，当你将鼠标悬停在蓝色.first 。

将鼠标悬停在元素上时，更改一般后代。

<style>
  .first:hover .second {
    background-color: blue;
  }
 </style>

 <div class="first">
  First
  <div class="container">
    Container
    <div class="second">Second</div>
  </div>
 </div>

如在示例2中，这也提供了更大的灵活性，因为两个元件不再必须直接相邻。您会注意到，在示例3和4中，可悬停区域更大。这种情况发生的原因是，只要光标位于其中一个子.first ，您仍然会悬停在.first 。

CSS伪类选择器link

:link CSS伪类用于定位具有href属性的所有未访问元素（例如，锚<a>元素），即使href具有空值。

一般语法：

target:link

例

/* Selects any <a> that has not been visited yet */
 a:link {
    color: red;
 }

CSS伪类选择器Visited

CSS：visited选择器更改用户访问过的链接的样式。此选择器用于帮助用户区分他们拥有和未访问过的链接。

如果正在使用多个CSS伪选择器，则：visited选择器必须位于：link选择器之后。

在下面的示例中，用户单击链接后，文本颜色将从黑色变为绿色。

a {
   color: black;
 }

 a:visited {
   color: green;
 }

由于用户隐私原因，：visited选择器仅限于修改以下CSS属性的样式：

颜色
背景颜色
边框颜色（包括不同边的边框颜色）
列治色
轮廓色
填充和描边（用于SVG图像）