html - 如何使用css选择前两行的第一个td

Question

我认为这是一个复杂的问题。让我们看看我是不是错了。我只想选择标记为“// 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>

提前致谢！

Answer 1

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

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

Answer 2

您需要将 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/

Answer 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>

Answer 4

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

td {
  // styles
}

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