: последний-ребенок не работает, как ожидалось?

проблема заключается в этом CSS и HTML. Вот это ссылка на jsFiddle С примером кода.

HTML

<ul>
    <li class"complete">1</li>
    <li class"complete">2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

li.complete:last-child {
    background-color:yellow;
}

li.complete:last-of-type {
    background-color:yellow;
}

не должны ли эти строки CSS нацеливаться на последний элемент li с" полным " классом?

этот запрос в jQuery также не нацелен на него:

$("li.complete:last-child");

но это делает:

$("li.complete").last();


li {
  background-color: green;
}
li.complete:first-child {
  background-color: white;
}
li.complete:first-of-type {
  background-color: red;
}
li.complete:last-of-type {
  background-color: blue;
}
li.complete:last-child {
  background-color: yellow;
}
<ul>
  <li class="complete">1</li>
  <li class="complete">2</li>
  <li>3</li>
  <li>4</li>
</ul>
3 54
html css css3 html5 css-selectors

3 ответа:

The last-child селектор используется для выбора последнего дочернего элемента родителя. Он не может использоваться для выбора последнего дочернего элемента с определенным классом под данным родительским элементом.

другая часть составного селектора (который прикреплен перед :last-child) задает дополнительные условия, которым должен удовлетворять последний дочерний элемент для его выбора. В приведенном ниже фрагменте вы увидите, как выбранные элементы отличаются в зависимости от остальной части соединения селектор.

.parent :last-child{ /* this will select all elements which are last child of .parent */
  font-weight: bold;
}

.parent div:last-child{ /* this will select the last child of .parent only if it is a div*/
  background: crimson;
}

.parent div.child-2:last-child{ /* this will select the last child of .parent only if it is a div and has the class child-2*/
  color: beige;
}
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div>Child w/o class</div>
</div>
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child-2'>Child w/o class</div>
</div>
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <p>Child w/o class</p>
</div>

чтобы ответить на ваш вопрос, ниже будет стиль последнего ребенка li элемент с цветом фона, а красный.

li:last-child{
    background-color: red;
}

но следующий селектор не будет работать для вашей разметки, поскольку last-child нет class='complete' даже если это li.

li.complete:last-child{
    background-color: green;
}

это сработало бы, если бы (и только если) последний li в вашей разметке также было class='complete'.

для решения вашего запроса в комментарии:

@Гарри мне кажется довольно странным, что: .complete: last-of-type пока не работает .complete: first-of-type работает, независимо от его позиции, это родительский элемент. Спасибо за помощь.

переключатель .complete:first-of-type работает в скрипке, потому что это (то есть элемент с class='complete') по-прежнему является первым элементом типа li внутри родительского. Пытаться чтобы добавить <li>0</li> как первый элемент под ul и вы найдете, что first-of-type также вьетнамки. Это потому что first-of-type и last-of-type селекторы выбирают первый / последний элемент каждого типа под родительским элементом.

см. ответ, опубликованный BoltClock, в этой поток для получения более подробной информации о том, как работает селектор. Это настолько всеобъемлющим, как он получает :)

97

: last-child не будет работать, если элемент не является самым последним элементом

в дополнение к ответу Гарри, Я думаю, что очень важно добавить/подчеркнуть, что :last-child не будет работать, если элемент не является самым последним элементом в контейнере. По какой-то причине мне потребовались часы, чтобы понять это, и хотя ответ Гарри очень тщательный, я не мог извлечь эту информацию из "селектор last-child используется для выбора последнего дочернего элемента a родитель."

предположим, что это мой селектор:a:last-child {}

это работает:

<div>
    <a></a>
    <a>This will be selected</a>
</div>

это не так: 

<div>
    <a></a>
    <a>This will no longer be selected</a>
    <div>This is now the last child :'( </div>
</div>

это не потому что a элемент не является последним элементом внутри своего родителя.

это может быть очевидно, но это было не для меня...

56

As last-child используется для выбора последнего дочернего элемента родительского элемента. вы можете достичь того же, что и это 

<ul>
    <li class="complete" id="one">1</li>
    <li class="complete" id="two">2</li>
    <li>3</li>
    <li>4</li>
</ul>


li.complete#one{background-color:yellow;} 

li.complete#two{background-color:red;}

дайте ID в список, а затем дать стиль или что-нибудь, как вы хотите

-10