javascript - 如何在一秒钟内突出显示整行

我来自jquery背景，这里的选择器很容易使用。我要做的是为一个tbody的第一个子对象（只有一个表）高亮显示整行。我试过在tr上使用css:first-child选择器，但我不知道为什么它不起作用。有没有办法在脚本方面做到这一点？使用vue.js选择元素？因为它没有向元素添加任何id（就像django这样的其他框架所做的那样）。这是我的模板：

<v-container v-else grid-list-xl>
      <v-data-table
        :disable-initial-sort="true"
        :rows-per-page-items="[10, 20, 30]"
        :headers="headers"
        :items="data_table"
        class="elevation-1"
      >
        <template v-if="loading" v-slot:no-data>
          <v-alert :value="true" color="warning" icon="warning">
            Trayendo datos del gateway, porfa esperate...
          </v-alert>
        </template>
        <template v-else v-slot:items="props">
          <td><strong>{{ props.item.time }}</strong></td>
          <td>{{ props.item.A }}</td>
          <td>{{ props.item.B }}</td>
          <td>{{ props.item.C }}</td>
        </template>
      </v-data-table>
  </v-container>

这是因为我每隔一分钟左右就会在表上得到一个新行，我希望用户能够很容易地看到添加了新数据。这是我试过的css：

  tr :first-child {
    color: red;
    background-image:none !important;
        -o-animation: fadeIt 5s ease-in-out;
           animation: fadeIt 5s ease-in-out;
  };

  @-o-keyframes fadeIt {
    0%   { background-color: #FFFFFF; }
    50%  { background-color: #AD301B; }
    100% { background-color: #FFFFFF; }
  }
  @keyframes fadeIt {
    0%   { background-color: #FFFFFF; }
    50%  { background-color: #AD301B; }
    100% { background-color: #FFFFFF; }
  }

最佳答案

您在tr : first-child中添加了不需要的空间。

tr:first-child {
  color: red;
  background-image: none;
  -o-animation: fadeIt 5s ease-in-out;
  animation: fadeIt 5s ease-in-out;
}

;
@-o-keyframes fadeIt {
  0% {
    background-color: #FFFFFF;
  }
  50% {
    background-color: #AD301B;
  }
  100% {
    background-color: #FFFFFF;
  }
}

@keyframes fadeIt {
  0% {
    background-color: #FFFFFF;
  }
  50% {
    background-color: #AD301B;
  }
  100% {
    background-color: #FFFFFF;
  }
}

<table>
  <tr>
    <td><strong>1</strong></td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr>
    <td><strong>1</strong></td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
</table>

看看这个solution：

关于javascript - 如何在一秒钟内突出显示整行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56887008/