css: last-child не влияет на мой последний элемент

Question

У меня есть следующий пример , где последний не работает при использовании: last-child. В моем коде вы можете видеть, что когда я ссылаюсь на последний элемент, используя класс «aa», он показывает «+ Add»

&.aa {}

Но если я закомментирую

&.aa{}

и установите его на

&:last-child{}

«+ Добавить» на последнем

не отображается. Я что-то упускаю?

Answer 1

Это потому, что у вас есть опечатка в вашей HTML структуре .

Итак, ваша текущая структура выглядит так:

<ul>
  <li class="item">
    <div>
      Tom Hanks
      <br /> Jenny Hanks
    </div>
  </li>
  <li class="item active">
    <div>
      Henry Fonda
      <br /> Valarie White
    </div>
  </li>
  <li class="aa">
    &nbsp;
  </li>
<ul>

Как мы видим, вы неправильно закрыли ul элемент , поэтому последний дочерний элемент он не будет рассматривать как:

<li class="aa">
   &nbsp;
</li>

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

Так должно получиться что-то вроде этого:

<ul>
  <!--> ul inner elements <-->
</ul>

Live demo : codepen.io