Блог

Главная - Вопросы по программированию - селекторы css не работают должным образом

селекторы css не работают должным образом

#html #css

#HTML #css

Вопрос:

У меня есть следующий HTML

 <dl>
  <dt>A</dt>
  <dd>B</dd>
  <dt>C</dt>
  <dd>D</dd>
  <dt>E</dt>
  <dd>F</dd>
</dl>

и следующий CSS

 dt,
dd {
  border-bottom: 1px solid #000;
}

dt:last-child,
dd:last-child {
  border-bottom: none;
}

Проблема в том, что у последнего dt есть граница.

Что не так? Чего мне не хватает?

Вот jsfiddle.

Комментарии:

1. Это потому, что последний <dt> не является последним дочерним элементом. <dd> Он взят в качестве последнего дочернего элемента вашего списка

2. Так что на самом деле CSS работает так, как ожидалось ;).

3. Он работал правильно, но не так, как я ожидал. Теперь я понимаю, почему.

Ответ №1:

Проблема в том, что ваш dt элемент не является последним дочерним элементом, а является последним dd элементом. Родительский объект может иметь только один последний дочерний объект, поэтому last-of-type вместо него следует использовать:

 dt,
dd {
    border-bottom: 1px solid #000;
}
    
dt:last-of-type,
dd:last-of-type {
   border-bottom: none;
}  
 <dl>
  <dt>A</dt>
  <dd>B</dd>
  <dt>C</dt>
  <dd>D</dd>
  <dt>E</dt>
  <dd>F</dd>
</dl>

Ответ №2:

вам нужно настроить таргетинг dt:last-of-type , так как последний dt не является last-child его родительским элементом (на самом деле за ним следует другой dd элемент).

Пример: https://jsfiddle.net/bxf8v8mg/2 /

В качестве дополнительного примечания вы могли бы оптимизировать свой код следующим образом

 dt:not(:last-of-type),
dd:not(:last-child) {
     border-bottom:  1px solid #000;
}

Таким образом, вам не нужно будет позже сбрасывать границу с помощью определенного правила.

Пример (оптимизированный): https://jsfiddle.net/bxf8v8mg/5 /

Ответ №3:

Здесь dt не последний дочерний dd элемент является последним дочерним элементом dl

Используйте 

 dt:last-of-type { border-bottom: none; }

Селектор :last-of-type соответствует каждому элементу, который является последним дочерним элементом определенного типа его родительского элемента.

Ответ №4:

Попробуйте этот:

  dt:nth-last-of-type(1), dd:nth-last-of-type(1){
     border-bottom: none;
 }

Ответ №5:

вы должны написать dd:nth-last-child(2) так, чтобы нацеливаться на предпоследний дочерний элемент родительского элемента, который есть dl . Или вы можете просто написать dd:last-of-type , чтобы настроить таргетинг на последний dd