css四种状态

CSS是一种较为复杂的样式设计语言，其中包含着很多重要的概念。四种状态是其中比较常见的一类，包括hover、active、focus和visited。这些状态都具有不同的特点和应用范围，在实现网页设计时都具有重要的作用。

/* hover状态 */
a:hover{
  color: #ff0000;
}

/* active状态 */
button:active{
  background-color: #0000ff
}

/* focus状态 */
input:focus{
  outline: none;
  border: 1px solid #000000;
}

/* visited状态 */
a:visited{
  color: #800080;
}

hover状态最常见的应用场景是在链接上。当用户鼠标悬停在链接上时，链接的颜色或背景颜色可以发生改变，这样可以提升用户操作的友好度和体验感。同样的，按钮等也经常会使用到active状态，通过变更按钮的背景颜色来提示用户按钮已被激活。

focus状态则与输入框有着密切的关系，当用户点击输入框并开始输入时，该输入框的边框和外观等都可能发生改变，这对于交互体验和输入提示都具有不小的帮助。最后，visited状态的应用范围相对较小，一般用于颜色标注等场景。