Question

我想将一些样式仅应用于具有特定类的TABLE的第一个TD。我正在使用：

.class td:first-child {
    background-color: red;
}

但如果有嵌套的TD，它们也会被设计。

如何将此仅应用于第一个TD？

See JSfiddle here（我希望test1变红，但不是test4）

Answer 1

除非您想使用类或其他内容，否则可以使用直接子选择器：

.pretty > tbody > tr > td:first-child {
    background-color: red;
}

Answer 2

您可以使用child selector，>

.pretty > tbody > tr > td:first-child {
  background-color: red;
}

＆＃13;

.pretty > tbody > tr > td:first-child {
  background-color: red;
}

＆＃13;

<table id="logtable" class="pretty">
  <thead>
    <tr>
      <th>Time</th>
      <th>From</th>
      <th>To</th>
      <th>Payload</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
      <td>
        <table>
          <tr>
            <td>test4</td>
            <td>test5</td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 3

子选择器应该可以添加tr:first-child，因此您也可以选择第一行。

.pretty > tbody > tr:first-child > td:first-child {
    background-color: red;
}

<table id="logtable" class="pretty">
    <thead>
        <tr>
            <th>Time</th>
            <th>From</th>
            <th>To</th>
            <th>Payload</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>test1</td>
            <td>test2</td>
            <td>test3</td>
            <td>
                <table>
                    <tr>
                        <td>test4</td>
                        <td>test5</td>
                    </tr>
                </table>
            </td>
         </tr>
         <tr>
             <td>test1</td>
             <td>test2</td>
             <td>test3</td>
             <td>
                 <table>
                     <tr>
                         <td>test4</td>
                         <td>test5</td>
                     </tr>
                 </table>
             </td>
         </tr>
         <tr>
             <td>test1</td>
             <td>test2</td>
             <td>test3</td>
             <td>
                 <table>
                     <tr>
                         <td>test4</td>
                         <td>test5</td>
                     </tr>
                 </table>
             </td>
         </tr>
     </tbody>
</table>

Answer 4

这应该可以解决问题：

.pretty > * > tr > td:first-child {
    background-color: red;
}

<table id="logtable" class="pretty">
    <thead>
        <tr>
            <th>Time</th>
            <th>From</th>
            <th>To</th>
            <th>Payload</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>test1</td>
            <td>test2</td>
            <td>test3</td>
            <td>
                <table>
                    <tr>
                        <td>test4</td>
                        <td>test5</td>
                    </tr>
                </table>
            </td>
         </tr>
         <tr>
             <td>test1</td>
             <td>test2</td>
             <td>test3</td>
             <td>
                 <table>
                     <tr>
                         <td>test4</td>
                         <td>test5</td>
                     </tr>
                 </table>
             </td>
         </tr>
         <tr>
             <td>test1</td>
             <td>test2</td>
             <td>test3</td>
             <td>
                 <table>
                     <tr>
                         <td>test4</td>
                         <td>test5</td>
                     </tr>
                 </table>
             </td>
         </tr>
     </tbody>
</table>

另见this Fiddle。

表类的第一个孩子TD

4 个答案: