CSS: Fokus-Selektor funktioniert nicht, wenn Element mit .focus() fokussiert ist

Question

Ich versuche, fokussierte <tr> s zu markieren.

Ich habe ein tabindex von -1 zu jedem von ihnen gegeben, und bestätigte, dass Aufruf some_tr.focus() Sätze document.activeElement zu diesen some_tr. Aus irgendeinem Grund wird jedoch some_tr nicht durch die CSS-Regel tr:focus hervorgehoben.

Es sollte darauf hingewiesen werden, dass für mich (Firefox 54), klicken Sie auf <tr> manuell tut verursachen, dass es hervorgehoben werden.

document.getElementById("that_tr").focus(); 
 
console.log(document.activeElement);

tr:focus { 
 
    background:lightblue; 
 
}

<table> 
 
    <tr> 
 
    <th>part</th> 
 
    <th>peice</th> 
 
    <th>thing</th> 
 
    <th>stuff</th> 
 
    </tr> 
 
    <tr tabindex="-1"> 
 
    <td><span>data1</span></td> 
 
    <td><span>data1</span></td> 
 
    <td><span>data1</span></td> 
 
    <td><span>data1</span></td> 
 
    </tr> 
 
    <tr id="that_tr" tabindex="-1"> 
 
    <td><span>data2</span></td> 
 
    <td><span>data2</span></td> 
 
    <td><span>data2</span></td> 
 
    <td><span>data2</span></td> 
 
    </tr> 
 
</table>

Warum that_tr nicht in der obigen Schnipsel werden hervorgehoben? Wie kann ich das zur Arbeit bringen?

Answer 1

Ich weiß nicht warum, aber ich habe festgestellt, dass mein Code für mich (Firefox unter Linux) funktioniert, wenn er von einem Ereignis-Listener ausgeführt wird. Dies scheint eine Eigenart des Browsers und möglicherweise ein Fehler zu sein.

document.addEventListener('keydown', function(e) { 
 
    document.getElementById("that_tr").focus(); 
 
    console.log(document.activeElement); 
 
});

tr:focus { 
 
    background:lightblue; 
 
}

<table> 
 
    <tr> 
 
    <th>part</th> 
 
    <th>peice</th> 
 
    <th>thing</th> 
 
    <th>stuff</th> 
 
    </tr> 
 
    <tr tabindex="-1"> 
 
    <td><span>data1</span></td> 
 
    <td><span>data1</span></td> 
 
    <td><span>data1</span></td> 
 
    <td><span>data1</span></td> 
 
    </tr> 
 
    <tr id="that_tr" tabindex="-1"> 
 
    <td><span>data2</span></td> 
 
    <td><span>data2</span></td> 
 
    <td><span>data2</span></td> 
 
    <td><span>data2</span></td> 
 
    </tr> 
 
</table>

Das ist gut genug für mich, da ich sowieso diese in einem Ereignis-Listener ausgeführt werden soll. Das heißt, ich hätte nichts dagegen, den Grund für dieses Verhalten (falls vorhanden) zu erfahren.