CSS需要指定一個類的第2行

我在我的HTML文件中有這樣的代碼。我需要針對第<tr>級detail-row和<tr>我需要針對.k-grouping-row類爲<tr>。CSS需要指定一個類的第2行

我該如何使用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>

來源

2017-07-14 looneytunes

請先修復元素標籤。 – bpunzalan

您的行中沒有任何單元格 - 這是無效的HTML。 – Johannes

通過在css中調用其類名稱來達到目標：'.k-grouping-row {background-color：black; }' – terryeah

您可以使用第n個孩子選擇，並通過其類選擇K-分組行：

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>

來源

2017-07-14 01:05:41 Mark

@looneytunes是否能夠正常工作？ – Mark

的CSS選擇器將

tr.detail-row tr.k-grouping-row { ... }

然而，你可能想解決一個或行中的所有細胞，所以你必須補充的是

增加：如果第二行還包含一個.k-grouping-row元素，那麼您必須更加精確：

table > tr.detail-row:nth-of-type(4) tr.k-grouping-row { ... }

來源

2017-07-14 00:48:08 Johannes

使用Kendo UI吧？

首先，您的代碼第10行缺少雙引號（「k-grid-header-wrap」）。

現在對於CSS部分，你可以像你所描述的那樣使用nth-child。

tr.detail-row:nth-child(4) .k-grouping-row{ 
    background-color:blue; 
}

與@Johannes的回答中，第n個孩子是4，因爲你的目標是其父的第4個孩子。這意味着你必須使用精確的HTML，否則CSS將無法工作。

在另一方面，你可以使用

tr.detail-row ~ tr.detail-row .k-grouping-row{ 
    background-color:blue; 
} 
tr.detail-row ~ tr.detail-row ~ tr.detail-row .k-grouping-row{ 
    background-color:inherit; 
}

〜字符查找下一個選擇指定不管是在它的途中（只要選擇你的元素的兄弟姐妹）。

來源

2017-07-14 01:02:16 esejuanb

CSS需要指​​定一個類的第2行

回答

相關問題

CSS需要指定一個類的第2行