javascript - last-of-type 应用于不存在的元素

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 实现略有不同。出于某种原因，fiddle 只在前面的详细信息行关闭时应用最后一行的样式——它在 jsFiddle 中效果更好。

要点是，当您单击详细信息按钮时，它会创建 DataTable 的子行。这些只是表格行，没什么特别的，但最后一个类型仅应用于最后一个表格行中的最后一个子行。

我希望看到的是:

• 单击第 1 行详细信息按钮:第 3 个子行设置样式
• 点击另一个详细信息按钮(在第一个下方)，先前样式化的子行是无样式和新行(作为实际的“最后类型”有这个已应用规则)。

实际情况如何
除了表格最后一行中的第 3 个子行之外，没有子行使用“last-of-type”样式设置样式 - 尽管在单击之前不存在。 在 jsFiddle 的情况下，您需要关闭之前的详细信息行以“启用”最后一个的样式 - 如上所述，我的代码库中不需要这种“关闭之前的详细信息” - 它似乎是一个 fiddle 的细微差别。

jsFillde 中更奇怪的一点是，当所有三个详细信息按钮都处于事件状态时，它会为最后一行设置样式，但只有两个按钮处于事件状态时则不会。

顺便说一句，我对 last-child 有同样的行为。
(使用 Chrome)。

Answer 1

在:last-of-type ，“类型”指的是标记名 - 它选择所有元素，这些元素在其兄弟元素中是最后一个具有该标记名的元素。在这种情况下，它要应用的元素是 tr元素，所以只有当元素是最后一个 tr 时才会匹配在其 sibling 中。

请注意，选择器是独立匹配的。事实上，你用 .row-detail 进一步限定了它对 :last-of-type 的方式没有影响火柴。这是两个完全独立的过滤器:“我有 .row-detail 类吗”和“我是我 sibling 中的最后一个 tr”。

因此，当您展开第三行时，这将匹配，因为“详细信息行”添加在所有其他行之后，所以最后一个 tr表中还有一个 .row-detail .当您展开任何其他行时，它不匹配，因为最后一个 .row-detail元素不是最后一个 tr在其 sibling 中。

您真正想要的确实存在于规范中，但目前仅由 Safari 实现::nth-last-child(1 of tr.row-detail) . of <selector> :nth-child() 的参数和 :nth-last-child()将计数限制在与选择器匹配的元素中。向浏览器 vendor 提交错误以支持它!