单击时 HTML 元素没有获得焦点

Question

我需要元素集中点击，这将触发特殊的 css，让它们交换背景颜色和颜色（例如第一个元素）。 我通过从 chrome 开发工具手动将 :focus 赋予该元素来实现当前结果。

.btns>span:focus {
  color: #2DB46A;
  background-color: #fff;
}

.btns>span {
  padding: 12px 0 8px 20px;
  color: #fff;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.btns {
  list-style-type: none;
  color: #fff;
  background-color: #2DB46A;
  font-family: Facile;
  font-size: 18px;
  margin-bottom: 50px;
}

<ul id="list-container">
  <li class="btns"><span>pcb design</span></li>
  <li class="btns"><span>analog design</span></li>
  <li class="btns"><span>power design</span></li>
  <li class="btns"><span>wireless design</span></li>
  <li class="btns"><span>fpga design</span></li>
  <li class="btns"><span>embedded software</span></li>
</ul>

如何获得像单击每个元素时的第一个元素一样的结果。

Answer 1

请注意Html DOM level 2规范：

元素实际上不会获得焦点，除非它是以下之一：

• 带有 href 的 HTMLAnchorElement/HTMLAreaElement
• HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement 但不使用disabled（IE 实际上会给你一个错误，如果你尝试），并且出于安全原因，文件上传有异常行为
• HTMLIFrameElement（尽管聚焦它并没有做任何有用的事情）。也许还有其他嵌入元素，我还没有全部测试过。
• 任何带有 a 的元素tabindex

因此，如果您希望.btns>span:focus真正获得焦点，则必须分配tabindex给您的元素。

编辑添加：

Weston Ruter的示例可以在这里找到