我在一个HTML中有4个按钮，它是列表（ul>li）格式的。我想实现一个功能，其中一个按钮将显示为已单击（应用了已单击的css样式）。然后，在单击列表中的任何其他按钮时，已经单击的按钮样式应该更改，然后只有新单击的按钮应该显示为已单击（应用了已单击的css样式）。因此，其他按钮将具有未点击的样式。
这可以使用javascipt来处理，但我特别希望只使用css来实现这一点。我无法解决这个问题。
我是CSS编程的新手，因此请求在这方面的帮助。
从所有其他元素中删除一个类后，将该类添加到单击的元素中。使用jquery addClass和removeClass方法。使用带有输入标记的css可以实现的唯一扩展是使用伪类:focus（不过，在按钮外部的任何单击都会移除焦点。）。如果要单击按钮之外的任何位置，则不可能保留样式。
$(document).ready(function(){
$('input[type=button]').click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
});.active{
background:white;
border:1px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul> <li> <input type="button" value="A"/> </li> <li> <input type="button" value="B"/> </li> <li> <input type="button" value="C"/> </li> <li> <input type="button" value="D"/> </li> </ul>如果要避免jquery，请使用selector.className（类型字符串）或selector.cclassList（类型数组）。
编辑
如果您愿意使用锚点而不是输入标记，那么我为您提供了一个纯css解决方案。
a {
display: block;
border: 2px solid black;
text-align: center;
margin:5px;
text-decoration:none;
}
a:active,a:target {
border: 2px solid red;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul> <li> <a href="#a" id="a"/>a</a> </li> <li> <a href="#b" id="b"/>b</a> </li> <li> <a href="#c" id="c"/>c</a> </li> <li> <a href="#d" id="d"/>d</a> </li> </ul>
</body>
</html>