CSS替代tabindex

Question

我想知道是否有任何CSS替代tabindex。

<button tabindex="1">ONE</button> 
 
<button tabindex="3">TWO</button> 
 
<button tabindex="2">THREE</button>

替代nav-index長期以來下降。

下面的功能是有風險的，並且可以在CR期間下降：

定向焦點導航：資產淨值向上，導航，右，資產淨值下降，NAV-left屬性。

Answer 1

頁面上的項目順序是確定選項卡索引順序的唯一方法。這是我幾年前用來支持非JavaScript版本的網站的原因。你可以用CSS做什麼，然後重新定位項目，現在你有使用flex和順序的優勢。

<style type="text/css"> 
.myFlexWrapper{ 
    display:flex; 
    /* I advise using sass and autoprefixer to poly fill all the other browsers*/ 
} 

.myFlexWrapper button:nth-child(1){ 
    order:30; /* will display this button visually last but retain the tabindex as 1 because it's the first item.*/ 
} 
.myFlexWrapper button:nth-child(2){ 
    order:10;/* will display this button visually first but retain the tabindex as 2 because it's the second item.*/ 
} 
.myFlexWrapper button:nth-child(3){ 
    order:20;/* will display this button visually second but retain the tabindex as 3 because it's the third item.*/ 
} 
</style> 

<div class="myFlexWrapper"> 
    <button>ONE</button> 
    <button>TWO</button> 
    <button>THREE</button> 
</div>