Question

我有这张桌子：

<table class="tg">
  <tr>
    <th>123456</th>
    <th>123456</th>
    <th>123456</th>
    <th>123456</th>
    <th>123456</th>
    <th>123456</th>
  </tr>
  <tr class='trip'>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
  </tr>
  <tr>
    <td>876543</td>
    <td>876543</td>
    <td>876543</td>
    <td>876543</td>
    <td>876543</td>
    <td>876543</td>
  </tr>
  <tr>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
  </tr>
  <tr class='trip'>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
  </tr>
</table>

并且我想为具有trip

类的行着色

如何使用分配给表格的tg进行旅行？

我创造了一个简单的小提琴，展示了这一点。 https://jsfiddle.net/sagsb415/1/

Answer 1

filter(Q(A) & Q(B))和tr之间的小提琴中有一个空格。试试这个。

.trip

https://jsfiddle.net/sagsb415/2/

Answer 2

.tg .trip td{
  background: red;
}

Answer 3

直接写在旅行班的样式表中

 .tg .trip {
    padding:5px 5px;
    background-color:#8600b3;
}

Answer 4

使用以下css：

.trip >td{
background-color:red
}

Answer 5

.tg tr.trip {
  padding:5px 5px;
  background-color:#8600b3;
}

Answer 6

试试这个......

.tg tr.trip {
  background: #f6c;
}

<table class="tg">
  <tr>
    <th>123456</th>
    <th>123456</th>
    <th>123456</th>
    <th>123456</th>
    <th>123456</th>
    <th>123456</th>
  </tr>
  <tr class='trip'>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
  </tr>
  <tr>
    <td>876543</td>
    <td>876543</td>
    <td>876543</td>
    <td>876543</td>
    <td>876543</td>
    <td>876543</td>
  </tr>
  <tr>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
    <td>AABBCCDD</td>
  </tr>
  <tr class='trip'>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
    <td>abcdef</td>
  </tr>
</table>

将CSS应用于表行

6 个答案: