CSS需要使用类来定位表的第二行(CSS need to target 2nd row of a table with a class)

CSS需要使用类来定位表的第二行(CSS need to target 2nd row of a table with a class)

我在我的HTML文件中有这个代码。 我需要使用类detail-row定位第二个<tr> ，并且在<tr>我需要为<tr>定位.k-grouping-row类。

如何使用CSS定位？ 我试过nth-child ，但它不能用于类名。

<table> <tr class="master-row" ></tr> <tr class="detail-row" ></tr> <tr class="master-row" ></tr> <tr class="detail-row" > <td class="k-detail-cell" colspan="5"> <div class="k-grid k-widget"> <div class="k-grid-header" > <div class="k-grid-header-wrap > <table role="grid"> <thead role="rowgroup"> <tr role="row"> <th class="k-group-cell k-header" scope="col">&nbsp;</th> </tr> </thead> </table> </div> </div> <div class="k-grid-content k-auto-scrollable" style="height: 0px;"> <table role="grid"> <tbody role="rowgroup"> <tr role="row" class="k-grouping-row"></tr> </tbody> </table> </div> </div> </td> </tr> </table>

I have this code in my HTML file. I need to target second <tr> with class detail-row and within the <tr> I need to target the .k-grouping-row class for a <tr>.

How can I target this using CSS? I tried nth-child, but it didn't work with the class names.

<table> <tr class="master-row" ></tr> <tr class="detail-row" ></tr> <tr class="master-row" ></tr> <tr class="detail-row" > <td class="k-detail-cell" colspan="5"> <div class="k-grid k-widget"> <div class="k-grid-header" > <div class="k-grid-header-wrap > <table role="grid"> <thead role="rowgroup"> <tr role="row"> <th class="k-group-cell k-header" scope="col">&nbsp;</th> </tr> </thead> </table> </div> </div> <div class="k-grid-content k-auto-scrollable" style="height: 0px;"> <table role="grid"> <tbody role="rowgroup"> <tr role="row" class="k-grouping-row"></tr> </tbody> </table> </div> </div> </td> </tr> </table>

最满意答案

您可以使用nth-child选择器，并按类选择k-grouping-row：

tr:nth-child(2) {
  color: lime;
}

.k-grouping-row {
  color: blue;
} 
  
<table>
  <tr class="master-row">
    <td>master row</td>
  </tr>
  <tr class="detail-row">
    <td>detail row</td>
  </tr>
  <tr class="master-row">
    <td>master row</td>
  </tr>
  <tr class="detail-row">

    <td class="k-detail-cell" colspan="5">
      <div class="k-grid k-widget">
        <div class="k-grid-header">
          <div class="k-grid-header-wrap >
            <table role=" grid ">
            <thead role="rowgroup ">
            <tr role="row ">
            <th class="k-group-cell k-header " scope="col ">&nbsp;</th>
            </tr>
            </thead>
            </table>
            </div>
            </div>
            
            <div class="k-grid-content k-auto-scrollable " style="height: 0px ">
            <table role="grid ">
            <tbody role="rowgroup ">
            <tr role="row " class="k-grouping-row ">
                <td>k-grouping-row</td>
            </tr>
            </tbody>
            </table>
            </div>
            </div>
        </td>

    </tr>

</table> 
  
 
You can use the nth-child selector, and select the k-grouping-row by its class:
 
 
 
  
  
tr:nth-child(2) {
  color: lime;
}

.k-grouping-row {
  color: blue;
} 
  
<table>
  <tr class="master-row">
    <td>master row</td>
  </tr>
  <tr class="detail-row">
    <td>detail row</td>
  </tr>
  <tr class="master-row">
    <td>master row</td>
  </tr>
  <tr class="detail-row">

    <td class="k-detail-cell" colspan="5">
      <div class="k-grid k-widget">
        <div class="k-grid-header">
          <div class="k-grid-header-wrap >
            <table role=" grid ">
            <thead role="rowgroup ">
            <tr role="row ">
            <th class="k-group-cell k-header " scope="col ">&nbsp;</th>
            </tr>
            </thead>
            </table>
            </div>
            </div>
            
            <div class="k-grid-content k-auto-scrollable " style="height: 0px ">
            <table role="grid ">
            <tbody role="rowgroup ">
            <tr role="row " class="k-grouping-row ">
                <td>k-grouping-row</td>
            </tr>
            </tbody>
            </table>
            </div>
            </div>
        </td>

    </tr>

</table>