Question

我的HTML文件中包含此代码。我需要将<tr>定位到课程detail-row，并且<tr>我需要将.k-grouping-row课定位到<tr>。

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

Answer 1

使用Kendo UI吧？

首先，您在第10行的代码中缺少双引号（＆＃34; k-grid-header-wrap＆＃34;）。

现在对于CSS部分，你可以像你描述的那样使用nth-child。

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

与@ Johannes＆＃39;一样回答，nth-child是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;
}

〜字符查找指定的下一个选择器，无论其路径是什么（只要选择器是元素的兄弟）。

Answer 2

CSS选择器将是

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

但是，您可能想要解决该行中的一个或所有单元格，因此您必须添加

添加：如果第二行还包含.k-grouping-row元素，那么您必须更精确：

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

Answer 3

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

＆＃13;

tr:nth-child(2) {
  color: lime;
}

.k-grouping-row {
  color: blue;
}

＆＃13;

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

＆＃13;

CSS需要使用类来定位表的第二行

3 个答案: