javascript - CSS :focus selector doesn't work when element is focused with . 焦点()

Question

我试图突出焦点 <tr>秒。

我添加了 -1 的标签索引给他们每个人，并确认调用some_tr.focus()套document.activeElement那个some_tr .然而，由于某种原因some_tr然后不会被 tr:focus 突出显示CSS 规则。

应该注意的是，对于我 (Firefox 54)，单击 <tr>手动会使其突出显示。

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>

为什么不 that_tr在上面的片段中突出显示？我怎样才能让它发挥作用？

Answer 1

我不知道为什么，但我发现我的代码在从事件监听器运行时对我(Linux 上的 Firefox)有效。这似乎是浏览器的一个怪癖，也可能是一个错误。

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>

这对我来说已经足够好了，因为无论如何我都打算在事件监听器中运行它。也就是说，我不介意了解这种行为的原因(如果有的话)。