Question

找不到这个确切的问题，所以就去...

我本来想要实现的与this question基本相同，但对于Rows而不是Divs。经过一些进一步的研究，我不确定我想达到的目标是否可以以我认为应该的确切方式实现，但这导致我发现了最后一种奇数。

在这种情况下，任何人都可以解释一下last-of-type是如何工作的吗？我将last-of-type应用于不存在的元素，而不应用于不存在的元素（希望如此）。

CSS规则：

.row-detail:last-of-type {
  background-color: red;
}

一个例子：

SampleTable = $('#sampleTable').DataTable();

$('.detailButton').on('click', function() {
	
  var button = $(this);
  var icon = button.find('i.fa');
  icon.toggleClass('fa-eye');
  icon.toggleClass('fa-eye-slash');
  button.blur();
  
  var row = button.closest('tr');
  var dataTableRow = SampleTable.row(row);
  console.log(dataTableRow.child.isShown())
  if (!dataTableRow.child.isShown()) {
    
    dataTableRow.child(buildDetailRows()).show();
  }
  else {
  
    dataTableRow.child.hide();
  }
});

function buildDetailRows() {
  
  return $('<tr class="row-detail"><td>Detail 1</td><td>Detail r1 c1</td><td>Detail r1 c2</td><td>Detail r1 c3</td></tr><tr class="row-detail"><td>Detail 2</td><td>Detail r2 c1</td><td>Detail r2 c2</td><td>Detail r2 c3</td></tr><tr class="row-detail"><td>Detail 3</td><td>Detail r3 c1</td><td>Detail r3 c2</td><td>Detail r3 c3</td></tr>');
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

.row-detail:last-of-type {  
  background-color: red;
}

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap.min.js"></script>


<div class="table">
  <table id="sampleTable" class="table table-striped table-bordered table-condensed">
    <thead>
      <tr>
        <th>Detail</th>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <button class="detailButton btn btn-xs btn-primary" data-toggle="button">
            <i class="fa fa-eye"></i>
          </button>
        </td>
        <td>row1 Col1</td>
        <td>row1 Col2</td>
        <td>row1 Col3</td>
      </tr>
      <tr>
         <td>
          <button class="detailButton btn btn-xs btn-primary" data-toggle="button">
            <i class="fa fa-eye"></i>
          </button>
        </td>
        <td>row2 Col1</td>
        <td>row2 Col2</td>
        <td>row2 Col3</td>
      </tr>
      <tr>
         <td>
          <button class="detailButton btn btn-xs btn-primary" data-toggle="button">
            <i class="fa fa-eye"></i>
          </button>
        </td>
        <td>row3 Col1</td>
        <td>row3 Col2</td>
        <td>row3 Col3</td>
      </tr>
    </tbody>
  </table>
</div>

请注意：这与相同代码的非jsFiddle实施略有延迟/延迟/稍有不同。小提琴，由于某种原因，仅在关闭先前的详细信息行时才应用最后一行的样式-最好不在jsFiddle中使用。

重点是，当您单击详细信息按钮时，它将创建DataTable的子行。这些只是表行，没什么特别的，但是last-of-type仅应用于verry最后一个表行中的最后一个子行。

我希望看到的是：

单击row1详细信息按钮：第三个子行将设置样式
点击另一个详细信息按钮（在第一个按钮下方），先前设置样式的子行是无样式且新行（即正确的“ last-of-type”具有此规则）。

实际情况
除了在表的最后一行中的第三个子行之外，没有任何子行以“ last-of-type”样式进行样式设置-尽管在单击之前不存在。对于jsFiddle，您需要关闭先前的细节行以“启用”最后一个样式上的样式-如上所述，我的代码库中不需要“关闭先前的细节”-似乎成为小提琴的细微差别。

jsFillde中的其他奇数表示，当所有三个详细信息按钮都处于活动状态时，它设置了最后一行的样式，而当只有两个处于活动状态时，则没有样式。

顺便说一句，我与上个孩子的行为相同。
（使用Chrome）。

Answer 1

在:last-of-type中，“类型”是指标记名-它在同级中选择所有使用该标记名的最后一个元素。那么，在这种情况下，将要应用的元素是tr元素，因此仅当该元素是其同级元素中的最后一个tr时才匹配。

请注意，选择器是独立匹配的。您进一步用.row-detail对其进行限定的事实对:last-of-type的匹配方式没有影响。那是两个完全独立的过滤器：“我有.row-detail类吗”和“我是我兄弟姐妹中的最后一个tr”。

因此，这将在您扩展第三行时匹配，因为“详细行”是在所有其他行之后添加的，因此表中的最后tr也是.row-detail。当您展开其他任何行时，它不匹配，因为最后一个.row-detail元素是 not 与其同级元素中的最后一个tr

规范中确实存在您想要的，但是目前仅由Safari实现：:nth-last-child(1 of tr.row-detail)。 of <selector>和:nth-child()的{{1}}参数仅将计数限制在与选择器匹配的元素之间。在浏览器供应商上记录错误以支持它！

最后一个类型应用于不存在的元素

1 个答案: