javascript - 选择时如何更改div的轮廓颜色？

Question

我需要在选中 div 时更改轮廓颜色。我尝试使用与悬停相同的技术(如下所示)，但我需要选择器方面的帮助。可以通过 JavaScript 还是 CSS 就足够了？

这是我尝试过的:

div {
    background: #ccc;
    margin: 20px;
}
div:hover {
    outline: 1px solid blue;
}

<div>1</div>
<div>2</div>
<div>3</div>

Answer 1

你可以试试:focus伪类。请注意，您将需要 tabindex使您的 div 可聚焦。

div {
    background: #ccc;
    margin: 20px;
}
div:focus {
    outline: 1px solid blue;
}

<div tabindex="-1">1</div>
<div tabindex="-1">2</div>
<div tabindex="-1">3</div>