Как выделить за одну секунду целый ряд

Question

Я пришел из фона jquery, где селекторы просты в использовании.То, что я хочу сделать, - это для первых детей в теле (есть только одна таблица), я хочу выделить на секунду весь ряд.Я попытался с селектором css :first-child на tr, но я не знаю, почему это не сработало.Есть ли способ сделать это на стороне сценариев?с vue.js, выбирающим элемент?потому что он не добавляет никакого идентификатора к элементам (как сделали бы некоторые другие фреймворки, такие как 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 в свой HTML-код (даже если он будет добавлен в DOM), селектор не будет работать.Вот почему мне нужно было добавить tr, чтобы обернуть каждый td.

Я знаю, что это некоторая базовая разметка HTML, но я подумал, что, если она появится в DOM, она все равно будет работать, но это не так.Теперь это мой рабочий код:

<v-container 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">
          <tr>
            <td><strong>{{ props.item.time }}</strong></td>
            <td>{{ props.item.A }}</td>
            <td>{{ props.item.B }}</td>
            <td>{{ props.item.C }}</td>
          </tr>
        </template>
      </v-data-table>
  </v-container> 

Answer 2

Вы добавили ненужный пробел в 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>

Посмотрите на это решение :