单击HTML元素时无法获得焦点

Question

我需要这些元素来关注点击，这将触发特殊的CSS，因为它们交换其bg-color和color（例如第一个元素）。 我通过对chrome dev-tools中的元素手动赋予：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（尽管集中精力没有任何用处）。其他嵌入元素也可能尚未全部测试。
• 任何带有tabindex的元素

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

---

已为添加内容进行编辑：

可以找到{em> Weston Ruter 的一个例子here

Answer 2

此答案基于Barr J's response。如他所说，使用tabindex和:focus选择器。因此，我认为您应该将他的回答标记为已接受。

此外，但也许您是故意这样做的，请继续设置子元素span而不是li的样式，否则焦点边框（虚线灰色）将覆盖橙色的子元素（Firefox位于至少），您最终将获得一个丑陋的渲染。

.btns:focus > span {
  color: #2DB46A;
  background-color: #fff;
  border:1px solid orange;
}

通过span元素的边框来确定其大小，否则，由于其填充值，该元素将比ul元素大：

.btns>span {
  padding: 12px 0 8px 20px;
  box-sizing:border-box; /* Here */
}

在有效代码段下面。

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

.btns>span {
  padding: 12px 0 8px 20px;
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.btns:focus>span {
  color: #2DB46A;
  background-color: #fff;
  border: 1px solid orange;
}

<ul id="list-container">
  <li class="btns" tabindex="0"><span>pcb design</span></li>
  <li class="btns" tabindex="1"><span>analog design</span></li>
  <li class="btns" tabindex="2"><span>power design</span></li>
  <li class="btns" tabindex="3"><span>wireless design</span></li>
  <li class="btns" tabindex="4"><span>fpga design</span></li>
  <li class="btns" tabindex="5"><span>embedded software</span></li>
</ul>