Question

我来自一个jQuery背景，选择器易于使用。我想要做的是为小腿的第一个孩子（只有一张桌子），我想在第二行中高亮显示第二个孩子。我尝试在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：

Answer 2

我找到了解决方案。显然，如果您没有在html代码上显式添加tr元素（即使它已添加到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>

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

2 个答案: