表类的第一个子 TD答案

【问题标题】：First child TD of a table class表类的第一个子 TD
【发布时间】：2016-05-02 02:06:45
【问题描述】：

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

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

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

我怎样才能将其仅应用于第一个 TD？

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

【问题讨论】：

你不想使用类？
好吧，我宁愿不这样做:-)（如果可能的话）
.class > tr:first-child > td:first-child 应该可以工作。
这可能是有关 css 选择器如何工作的有用信息stackoverflow.com/questions/2636379/css-selectors-versus-space
您知道如何在 SASS 中执行此操作吗？

标签： html css

【解决方案1】：

除非你想使用类什么的，你可以使用直接子选择器：

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

【讨论】：

您知道如何在 SASS 中执行此操作吗？
@MaRco85 jsfiddle.net/Sb2w4/42，虽然在这种情况下它在纯 CSS 中看起来更好。
太棒了。它实际上在纯 CSS 中看起来更好:-D 非常感谢

【解决方案2】：

您可以使用child selector、>

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

.pretty > tbody > 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>
  </tbody>
</table>

【讨论】：

非常感谢..！这对我来说是新事物
您知道如何在 SASS 中执行此操作吗？

【解决方案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>

【讨论】：

我添加了更多的表格行，因此您可以看到在行上使用:first-child 伪选择器的结果。
太棒了。您知道如何在 SASS 中执行此操作吗？
除非你需要单独设置每个元素的样式，否则我认为你不需要为 SASS 做任何不同的事情。

【解决方案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。

【讨论】：

@MaRco85 ：如果要将选择限制为仅属于 tbody 的 td 元素，请将 * 替换为 tbody。如果您希望您的代码也适用于th 元素，只需将td 替换为th。等