Почему последний ребенок не работает? - PullRequest
Новая
       41

Почему последний ребенок не работает?

0 голосов
/ 06 марта 2012

У меня есть проблема, которую вы должны решить, как вы знаете.
Я оторвал все свои волосы, пытаясь выяснить, почему черт last-child не работает.
Я попытался удалить border-rightс last-child, но по некоторым причинам это не сработало.
Вот ссылка

Ответы [ 3 ]

6 голосов
/ 06 марта 2012

Ваш селектор #countdown .num:last-child.

Ваш HTML 

<ul ID="countdown">
  <li> <div ID="days" class="num">00</div>  <div CLASS="text">days</div>     </li>
  <li> <div ID="hours" class="num">00</div> <div CLASS="text">hours</div>    </li> 
  <li> <div ID="mins" class="num">00</div>  <div CLASS="text">minutes</div>  </li>
  <li> <div ID="secs" class="num">00</div>  <div CLASS="text">seconds</div>  </li>
  <div class="clear"></div>
</ul>

Подумайте: .num последний потомок своего родителя?Ответ: нет.

Ваш селектор должен быть больше похож на #countdown > li:last-of-type .num, выбирая .num внутри последнего li в #countdown.

Обратите внимание, что в этом случае last-of-type должениспользовать вместо last-child, потому что у вас есть этот <div class="clear"></div>, который является недопустимым HTML (вы не можете иметь div непосредственно внутри ul).

1 голос
/ 06 марта 2012

Основная причина, по которой last-child не работает, потому что в вашем #countdown UL last-child это <div class="clear"></div>, а не LI. Поэтому лучше использовать last-of-type вместо last-child. Как это: 

#countdown li:last-of-type .num,
  #countdown li:last-of-type .text{
    border:0;
  }

Проверьте это http://jsbin.com/apuhep/4/edit#html,live

0 голосов
/ 06 марта 2012

Внутри вашего элемента ul есть элемент div после последнего элемента li.Это неверная разметка и может привести к непредсказуемым последствиям.Более того, это, вероятно, заставляет браузеры рассматривать элемент div как последний дочерний элемент элемента ul.

...