如果你想保持点击的状态，你需要JavaScript，hover可以用CSS。
您可以使用div:active { /* style */ }作为单击并保持的样式，但它将在鼠标抬起后消失。
这是使用jQuery的一种快速方法：

$('.box').on('click', function(e){
  e.preventDefault();
  $(this).css('border-color', 'lime');
});

最好还是切换一个类：
JS：

$('.box').on('click', function(e){
      e.preventDefault();
      $(this).toggleClass('myClickState');
    });

CSS：

.myClickState {
  border-color: lime;
}

function fnChangeBorder(boxId)

{document.getElementById(boxId).style.border = "solid #AA00FF";}

<div class="box" id="A" onclick="fnChangeBorder('A')">Click here !!</div>

我选择A作为参数是因为数字不能作为函数参数

试试这个：

.box:focus{ border-color:#cd3232; }

是的，您可以使用:active伪选择器来实现这一点。
试试这个：

.box:active {
    border-color: red;   
}

但是，释放鼠标后，这种情况不会持续。
IE6也不支持。

看看这个函数：
http://jqueryui.com/addClass/
它展示了如何应用click事件和更改CSS类。您只需创建一个具有边框颜色的所需类。

你可以通过jQuery（JSFiddle here）来实现：

$(document).ready(function() {
  $('.box').click(function() {
    if($('.active').length) {
      $('.active').not($(this)).removeClass('active').addClass('box');
    }      
    $(this).removeClass('box').addClass('active');     
  }); 
});

您希望使用:focus CSS伪类代替:active。
试试这个：

.box:focus {
    border-color: red;   
}

在单击事件完成后，这应持续存在。