如何使用css选择前两行的第一个td答案

【问题标题】：How to select first td of first two rows using css如何使用css选择前两行的第一个td
【发布时间】：2021-02-17 15:17:35
【问题描述】：

我认为这是一个复杂的问题。让我们看看我是不是错了。我只想选择标记为“// to be selected”的td 除了标记的之外，我不想为任何其他 td 应用样式。请帮忙！

<table>
  <tbody>
    <tr>
     <td> // to be selected
      <div>
       <div>
        <table>
         <tbody>
          <tr>
           <td></td>
          </tr>
         </tbody>
        </table> 
       </div>
      </div>
     </td>
   </tr>
   <tr>
     <td> // to be selected
      <div>
       <div>
        <table>
         <tbody>
          <tr>
           <td></td>
          </tr>
         </tbody>
        </table> 
       </div>
      </div>
     </td>
   </tr>
   <tr>
     <td> // to be selected
      <div>
       <div>
        <table>
         <tbody>
          <tr>
           <td></td>
          </tr>
         </tbody>
        </table> 
       </div>
      </div>
     </td>
   </tr>
  </tbody>
</table>

提前致谢！

【问题讨论】：

给td添加一个类怎么样？
布局是自动生成的，因此我无法为其分配 CSS 类。
使用td为所有td元素设置样式并使用td td将样式重置为嵌套的td元素？
工作就像一个魅力！非常感谢您的解决方案。
你能把我的帖子标记为答案吗？谢谢。

标签： html css css-selectors csscomb

【解决方案1】：

使用td 为所有td 元素设置样式，并使用td td 将样式重置为嵌套的td 元素。

td {
  // styles
}

td td {
  // styles to reset the nested elements
}

【讨论】：

如果系统要生成任何相邻的 TD 单元格，这也会为所有相邻的 TD 单元格着色
@KaraokeStu 为什么会有问题？
这不一定是问题，除非他不希望后续的 TD 被着色

【解决方案2】：

如前所述（在我看来是最佳选择），您可以为要选择的 td 元素添加一个类，您也可以通过使用这些元素的路径使用特定性来选择它们。

CSS    
table tbody tr td{
    /* your code here */
}

【讨论】：

再想一想，这可能不是最好的选择，因为该元素的子元素将继承该样式。也许使用javascript。

【解决方案3】：

var table = document.getElementsByTagName('table')[0]
let tbody = table.children[0];

let trs = tbody.children



for (let i = 0; i < trs.length; i++){

  var tdhtml = trs[i].getElementsByTagName('td')[0].innerHTML 
  
  trs[i].getElementsByTagName('td')[0].innerHTML ='selected' + tdhtml
  
}

<table>
  <tbody>
    <tr>
     <td> 1<!--to be selected-->
      <div>
       <div>
        <table>
         <tbody>
          <tr>
           <td></td>
          </tr>
         </tbody>
        </table> 
       </div>
      </div>
     </td>
   </tr>
   <tr>
     <td> 2<!--to be selected-->
      <div>
       <div>
        <table>
         <tbody>
          <tr>
           <td></td>
          </tr>
         </tbody>
        </table> 
       </div>
      </div>
     </td>
   </tr>
   <tr>
     <td> 3 <!-- to be selected-->
      <div>
       <div>
        <table>
         <tbody>
          <tr>
           <td></td>
          </tr>
         </tbody>
        </table> 
       </div>
      </div>
     </td>
   </tr>
  </tbody>
</table>

【讨论】：

无法使用 JavaScript。我使用的是 SAP Lumira，因此只允许自定义 CSS 文件。
向我们展示页面的其余 html
Javascript 对此太过分了，而且当 javascript 启动并设置样式时，您最终会遇到可怕的“浏览器闪存”

【解决方案4】：

您需要将 CSS 类应用于最高级别表中每一行的第一个 TD，如下所示：

/* Set all root TR's and the first TD element */
table>tbody>tr>td:first-child {
  background-color: yellow;
}

/* Reset so that this doesn't cascade */
table>tbody>tr>td:first-child td {
  background-color: inherit;
}

这里的例子： https://jsfiddle.net/0utqvhy6/

【讨论】：