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"> </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"> </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 "> </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 "> </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>
更多推荐
发布评论