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

Question

我来自 jquery 背景，其中选择器易于使用。我想要做的是为 tbody 的第一个 child (只有一张 table )我想突出显示整行一秒钟。我尝试在 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; }
  }

Answer 1

您在 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 :