有一些跟用户动作相关的伪类，比如鼠标指针移动到上元素上，会应用一个 :hover 的伪类 … 元素在活动状态的时候，比如用户点击元素并且按住鼠标按键，这个时候会应用 :active 伪类 … 松开鼠标以后，会去掉这个伪类 …

还有一个 :focus 伪类 … 比如在文本框处于焦点状态的时候，也就是点击选中了文本框 … 这个动作会为元素添加 :focus 伪类 …

我们可以去设置一下 li 标签的 :hover 伪类的样式 …

li:hover {
background-color: #eee;
border-radius: 5px;
}

鼠标放在列表项目上，会触发在 :hover 伪类上的样式 …

再设置一下列表项目的 :active 伪类的样式 …

li:active {
background-color: #8058a5;
}

然后再设置一下在激活状态下的 a 标签的样式 ..

li:active a{
color: #fff;
}

找到页面上的一个列表项目 … 用鼠标按住它 … 这样会应用在它的 :active 伪类里的样式 … 背景会变成紫色 … 链接文字会成为白色 …

下面我们再试试 :focus 伪类 … 点击选中这个文本框 .. .. 这样会在这个文本框元素上应用一个 :focus 伪类 … 这个文本框上我定义了一个叫 #search 的 ID … 可以使用这个 ID 作为这个选择器的一部分 …

#search:focus {
outline: none;
border: 2px solid #129FEA;
}

再点击选中这个文本框 … 现在， 处于焦点状态的文本框会应用我们自己设计的样式 …