CSS: последний ребенок

Question

У меня есть div#content со многими div.item внутри.При использовании :last-child, чтобы сделать последний div.item без border-bottom, все в порядке.Но, поскольку содержимое динамически добавляется с использованием результатов php и mysql, я использую таблицу условной нумерации страниц, которая будет добавлена ​​после последней div.item, что означает в нижней части div#content.Здесь будет проблема, так как CSS :last-child не распознает последний div.item как последнего ребенка.мой CSS выглядит так:

div#content div.item:last-child {
  border-bottom: none;
}

, как вы можете видеть, я определяю, что последний дочерний идентификатор такой div.item

Любые предложения, пожалуйста.заранее спасибо.

!!!!!Обратите внимание, что проблема заключается не в том, что содержимое является динамическим, а в том, что CSS: last-child не распознает div.item как последний дочерний элемент, а последний элемент в содержимом div # несмотря на то, чтоCSS это:

div#content div.item:last-child

Answer 1

Одна возможность Я могу думать, что вы добавляете элементы, которые не <div> s и / или не имеют класса item. Проверьте выходные данные вашего скрипта PHP / MySQL и посмотрите, есть ли какие-либо элементы, кроме div.item, помимо (в терминах DOM) элементов div.item.

Такие элементы не будут соответствовать селектору:

div#content div.item:last-child

Этот селектор находит только <div> с классом item, которые являются последними дочерними элементами div#content.

Вот пример.

Перед добавлением

<div id="content">
  <div class="item"></div> <!-- [1] Selected -->
</div>

После добавления

<div id="content">
  <div class="item"></div> <!-- [2] Not selected -->
  <div></div>              <!-- [3] Not selected -->
</div>

Что выбирается, а что нет, и , почему ?

1. Выбранный
   Этот элемент <div> имеет класс item и является последним дочерним элементом div#content.

   Точно соответствует вышеуказанному селектору.

2. Не выбран
   Этот <div> элемент имеет класс item, но не последний потомок div#content.

   Это не совсем соответствует вышеуказанному селектору; однако он может соответствовать одному из следующих селекторов:

   /* Any div.item inside div#content */
   div#content div.item
   
   /* The last div.item child of its parent only */
   div#content div.item:last-of-type
   

3. Не выбран
   Хотя этот <div> элемент является последним дочерним элементом, он не имеет класс item.

   Это не совсем соответствует вышеуказанному селектору; однако, это может соответствовать этому:

   /* Any div that happens to be the last child of its parent */
   div#content div:last-child
   

Answer 2

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

Я думаю, что вы можете перечитать / перезагрузить файл CSS, применив правило.Не знаю, это предположение.

Другая возможность - динамически устанавливать стили.

---

РЕДАКТИРОВАТЬ: Кажется, у вас проблема с браузером CSS x.

Проверьте это: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Selectors

Answer 3

Вы можете использовать JavaScript только для обновления CSS.Смотрите здесь: http://paulirish.com/2008/how-to-iterate-quickly-when-debugging-css/

Другим подходом будет использование библиотеки, такой как jQuery, и запуск этой строки скрипта каждый раз, когда вы добавляете новые div.(или, может быть, вы используете другую библиотеку js, поскольку вы говорите, что вы динамически добавляете div на страницу)

$('div#content div.item:last-child').css('borderBottom','none');

вам может понадобиться сбросить границы, прежде чем вы сделаете выше.т.е. предыдущий 'последний' div может все еще не иметь границы основания.поэтому сбросьте все границы, затем запустите скрипт, чтобы удалить границу для последней.