Вопрос по css-selectors, html, css, html5, css3 – : последний ребенок не работает, как ожидалось?

55

Проблема заключается в этом 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 с классом «complete»?

Этот запрос в 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>

@PatrickEvans Что ты имеешь в виду?api.jquery.com/category/selectors или более конкретноapi.jquery.com/last-child-selector Nej Kutcharian

Ваш Ответ

3   ответа
67
: last-child не будет работать, если элемент не является элементом VERY LAST

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

Предположим, это мой селектор: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 Элемент не последний элемент внутри своего родителя.

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

Чувак ... сегодня это заставило меня замолчать на час, потому что я добавил <div> под этим последним элементом, который сломал мой код. Scottie
Двойной человек! Кроме того, nth-last-child работает так же. Вместо этого используйте последний тип. Andri
Большое спасибо за эту информацию, она помогла мне понять, почему мой CSS не работает. Я уверен, что приверженцы утверждают, что это правильно, но я бы хотел, чтобы псевдокласс был последним потомком селектора, который вы модифицируете, и не работал только с последним потомком всего списка узлов. BeniRose
101

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: последний тип не работает, но .complete: первый тип работает, независимо от его положения, это родительский элемент. Спасибо за вашу помощь.

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

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

@NejKutcharian: Хорошо, понял..complete:first-of-type работает в скрипке, потому что это все еще первый элемент типаli внутри родителя. Попробуй добавить<li>0</li> в качестве первого элемента подli и вы найдете этоfirst-of-type также проваливается. Harry
@ Гарри, я нахожу довольно странным, что: .complete: последний тип не работает, но .complete: первый тип работает, независимо от его положения, это родительский элемент. Спасибо за вашу помощь. Nej Kutcharian
Это так глупо, но я думаю, что ты прав. Надеюсь, они добавят это в спецификацию CSS4. Nej Kutcharian
@NejKutcharian: Да, я думаю, что это было в предложении в течение длительного времени. Harry
-9

мента родительского элемента. вы можете достичь того же, как это

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

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

Весь смысл использования: nth-child: last-child: first-child заключается в том, что у нас нет / не требуется жестко закодированных классов / идентификаторов элементов Prof83
Хотя Никхил прав, это возможно, но во многих динамических сценариях невозможно добавить структурированный идентификатор, подобный этому. TJ Sherrill
Это то, что мы называем «жестко закодированным значением», этот метод не будет работать, если у меня есть динамические данные, которые нужно вставить, и я точно не знаю, сколько у меня строк. ismnoiet
Хотя это правильный способ достижения желаемого эффекта, он приводит к грязной разметке / таблицам стилей. Josh Click

Похожие вопросы