如何使用 css select 前两行的第一个 td

Question

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

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 2

按照之前的建议（在我看来是最好的选择），你可以在你想要select的td元素中添加一个class，你也可以select 他们通过使用这些元素的路径来使用特异性。

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

Answer 3

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

td {
  // styles
}

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

Answer 4

您需要将 CSS class 应用到最高级别 table 中每一行的第一个 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/

如何使用 css select 前两行的第一个 td

How to select first td of first two rows using css

html

css

css-selectors

csscomb