238-hover 、active、focus伪类

:hover 伪类用于选择鼠标悬停在元素上的状态

:active 伪类表示元素处于激活状态，通常是在用户点击并按住鼠标按钮时触发。这一状态通常在点击瞬间发生，持续到鼠标按钮释放。

:focus 伪类表示元素获得焦点，通常是通过键盘（Tab 键）或者其他方式进行焦点切换时触发。对于可点击元素，点击时也会使其获得焦点。

  <style>
    button {
      padding: 10px;
      margin: 10px;
    }

    /* :hover 样式 */
    button:hover {
      background-color: lightblue;
    }

    /* :active 样式 */
    button:active {
      background-color: lightcoral;
    }

    /* :focus 样式 */
    button:focus {
      outline: 2px solid red;
    }
  </style>