常规态，悬停态，选中态，聚焦态 css 伪类

[981377660LMT]

1. 常规态：对应的是元素的默认样式，通常不需要特定的 CSS 伪类来表示。直接定义元素的样式即可，例如：

button {
  background-color: #4CAF50;
  color: white;
}

2. 悬停态：对应的是 CSS 的 :hover 伪类。当鼠标悬停在元素上时，:hover 伪类会生效，例如：

button:hover {
  background-color: #45a049;
}

3. 选中态：对应的是 CSS 的 :active 伪类。当用户点击或触摸元素，而且还没有释放时，:active 伪类会生效，例如：

button:active {
  background-color: #3e8e41;
}

4. 聚焦态：对应的是 CSS 的 :focus 伪类。当元素获得焦点时（例如，用户点击或触摸元素，或者使用键盘导航到元素），:focus 伪类会生效，例如：

button:focus {
  outline: none;
  border: 2px solid #4CAF50;
}

以上就是常规态、悬停态、选中态、聚焦态对应的 CSS 伪类。

CSS 的伪类选择器有一定的优先级，因此在设置样式时，需要按照一定的顺序来设置，以避免后面的样式覆盖前面的样式。常见的顺序是 "LoVe/HAte" 原则，即：

1. :link - 未访问的链接
2. :visited - 用户已访问的链接
3. :hover - 用户鼠标悬停的元素
4. :active - 用户激活的元素

对于你提到的几个伪类，建议的顺序是：

1. 常规态：直接定义元素的样式，没有特定的顺序要求。
2. 悬停态（:hover）：应该在常规态之后，聚焦态和选中态之前定义。
3. 聚焦态（:focus）：应该在悬停态之后，选中态之前定义。
4. 选中态（:active）：应该在聚焦态之后定义。

这样可以确保在用户交互过程中，样式的变化符合预期。例如：

button {
  /* 常规态 */
  background-color: #4CAF50;
  color: white;
}

button:hover {
  /* 悬停态 */
  background-color: #45a049;
}

button:focus {
  /* 聚焦态 */
  outline: none;
  border: 2px solid #4CAF50;
}

button:active {
  /* 选中态 */
  background-color: #3e8e41;
}