按下 选择器

Question

我想创建一个button在按下时会更改其样式的。这是我的CSS代码：

button {

    font-size: 18px;

    border: 2px solid gray;

    border-radius: 100px;

    width: 100px;

    height: 100px;

}



button:active {

    font-size: 18px;

    border: 2px solid red;

    border-radius: 100px;

    width: 100px;

    height: 100px;

}


<button>Button</button>

仅当我单击并按住它时，它才会更改。我想使其按下后更改样式。例如，正常状态将为白色，被单击时的状态将为绿色，而释放单击后的状态将为红色。

Answer 1

如果使用<a>标签而不是按钮，则可以执行此操作。我知道这并不是您所要的，但是如果您找不到解决方案，它可能会为您提供其他选择：

从另一个示例的演示中借来的结果是：

a {

  display: block;

  font-size: 18px;

  border: 2px solid gray;

  border-radius: 100px;

  width: 100px;

  height: 100px;

  text-align: center;

  line-height: 100px;

}



a:active {

  font-size: 18px;

  border: 2px solid green;

  border-radius: 100px;

  width: 100px;

  height: 100px;

}



a:target {

  font-size: 18px;

  border: 2px solid red;

  border-radius: 100px;

  width: 100px;

  height: 100px;

}


<a id="btn" href="#btn">Demo</a>

注意的使用:target; 这是通过散列指定元素时应用的样式。这也意味着您的HTML将需要这样：<a id="btn" href="#btn">Demo</a>一个以自身为目标的链接。和演示

另外，作为脚注：这实际上应该使用JavaScript并从元素中应用/删除CSS类来完成。这将不那么令人费解。