последний из типа применяется к элементам, которые не существуют

Question

Не могу найти этот точный вопрос, так что вот так ...

То, чего я изначально хотел достичь, было по существу таким же, как этот вопрос , но для строк вместо Div.после некоторых дальнейших исследований я не уверен, что то, чего я хочу достичь, возможно, именно так, как я предполагаю, но это привело меня к открытию странности последнего типа.

Может кто-нибудь объяснить, как работает последний тип в этом сценарии?Последний тип применяется к несуществующим элементам и не применяется к существующим (надеюсь, что это имеет смысл).

Правило 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.это всего лишь строки таблицы, ничего особенного, но последний тип применяется только к самой последней дочерней строке последней строки таблицы.

То, что я ожидал увидеть, было:

• Нажмите кнопку детализации строки 1: 3-й дочерний ряд будет стилизован
• Нажмите кнопку еще одной детализации (ниже первой), ранее стилизованный дочерний ряд будет отменен, а новый ряд будетк действительному «последнему типу» применено это правило).

Что происходит на самом деле
Ни один дочерний ряд не имеет стилизации с «последним типом»стиль, за исключением 3-й дочерней строки в последнем ряду таблицы - несмотря на то, что не существует до щелчка. В случае jsFiddle вам необходимо закрыть предыдущие строки сведений, чтобы «включить» стиль в последнем - как указано выше, эта «закрыть предыдущие сведения» не требуется в моей кодовой базе - кажется,быть нюансом скрипки.

Дальнейшая странность в jsFillde указывает на то, что он стилизует последнюю строку, когда активны все три кнопки детализации, а не только две.

Кстати,я поступаю так же с последним ребенком.
(с помощью Chrome).

Answer 1

В :last-of-type «тип» относится к тэгу - он выбирает все элементы, которые являются последними с этим тэгом, среди своих братьев и сестер. Тогда в этом случае элементы, к которым он будет применяться, являются tr элементами, поэтому он будет совпадать только тогда, когда элемент является последним tr среди своих братьев и сестер.

Обратите внимание, что селекторы совпадают независимо . Тот факт, что вы уточнили его с помощью .row-detail, не влияет на совпадение :last-of-type. Это два совершенно независимых фильтра: «Есть ли у меня класс .row-detail» и «Являюсь ли я последним tr среди моих братьев и сестер».

Таким образом, это будет соответствовать, когда вы развернете третью строку, потому что «строки подробностей» добавляются после всех остальных строк, поэтому последний tr в таблице также является .row-detail. Он не совпадает при развертывании любой из других строк, потому что тогда последний элемент .row-detail равен , а не последним tr среди его братьев и сестер.

То, что вы на самом деле хотите существует в спецификациях, но в настоящее время реализовано только в Safari: :nth-last-child(1 of tr.row-detail). Аргумент of <selector> для :nth-child() и :nth-last-child() ограничивает подсчет только среди элементов, соответствующих селектору. Ошибки в файлах поставщиков браузеров, чтобы поддержать это!