如何使用纯CSS控制关键TAB所针对的元素？

Question

考虑以下代码:

button{background:yellow;}
button:focus{outline:red 5px solid;}

button:nth-of-type(1){color:green;}
button:nth-of-type(2){color:orange;}
button:nth-of-type(3){color:blue;}
button:nth-of-type(4){color:grey;}
button:nth-of-type(5){color:purple;}

<section>
  <button type="button">Button 1</button>
  <button type="button">Button 2</button>
  <button type="button">Button 3</button>
  <button type="button">Button 4</button>
  <button type="button">Button 5</button>
</section>

请注意,当单击键盘上的键选项卡时,它会使焦点从第一个按钮跳到下一个按钮,依此类推到最后一个按钮,然后再移动到浏览器元素.

我的问题是当焦点在"底部2"时我是否有办法跳过"按钮3"并按下键标签？我很高兴知道有一个CSS属性来控制它,但如果不是javascript解决方案也欢迎.

Answer 1

你会感到惊讶,但这次它实际上不是CSS或JS,而是HTML做的工作.

button{background:yellow;}
button:focus{outline:red 5px solid;}

button:nth-of-type(1){color:green;}
button:nth-of-type(2){color:orange;}
button:nth-of-type(3){color:blue;}
button:nth-of-type(4){color:grey;}
button:nth-of-type(5){color:purple;}

<section>
  <button type="button">Button 1</button>
  <button type="button">Button 2</button>
  <button type="button" tabindex="-1">Button 3</button>
  <button type="button">Button 4</button>
  <button type="button">Button 5</button>
</section>

或者用JS,

[].map.call(document.getElementsByClassName("no-tab"), function(e){ e.tabIndex = -1; });