CSS：焦点选择器在使用.focus（）聚焦元素时不起作用

Question

我正在尝试突出重点<tr>。

我为每个人添加了-1的tabindex，并确认调用some_tr.focus()将document.activeElement设置为some_tr。但是，出于某种原因，some_tr CSS规则不会突出显示tr:focus。

应该注意的是，对我来说（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）。这似乎是浏览器的一个怪癖，也可能是一个错误。

＆＃13;

＆＃13;

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

＆＃13;

tr:focus {
  background:lightblue;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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