[分享]css中如何设置选中效果

在CSS中，我们可以使用伪类选择器来设置选中效果，其中最常用的是:hover伪类和:focus伪类。接下来，我们将详细介绍如何使用这两个伪类来实现选中效果。:hover伪类:hover伪类可以在用户鼠...

在CSS中，我们可以使用伪类选择器来设置选中效果，其中最常用的是:hover伪类和:focus伪类。接下来，我们将详细介绍如何使用这两个伪类来实现选中效果。
:hover伪类
:hover伪类可以在用户鼠标悬停在元素上方时触发。我们可以使用:hover伪类来设置鼠标悬停状态下的背景色、字体颜色、边框等效果。下面是一段示例代码：

p:hover {
  background-color: #FFC;
  color: #333;
  border: 1px solid #333;
} 

上述代码表示，当用户将鼠标悬停在p标签上方时，p标签的背景色将变为浅黄色，字体颜色将变为深灰色，边框将变为1像素粗的黑色边框。
:focus伪类
:focus伪类可以在元素获得焦点时触发。我们可以使用:focus伪类来设置被选中的文本框、下拉菜单、链接等元素的选中效果。下面是一段示例代码：

input:focus {
  border: 2px solid #F00;
  outline: none;
  box-shadow: 0 0 10px #F00;
} 

上述代码表示，当用户点击输入框让其获得焦点时，输入框的边框将变为2像素粗的红色边框，选中状态下的外边框将消失，输入框还会出现一个红色的阴影效果。
总结
通过使用:hover伪类和:focus伪类，我们可以轻松地实现选中效果。但是，我们需要注意在设置边框样式时最好在其前面再设置一下outline:none，防止出现其他不必要的边框出现。