Иногда может потребоваться удалить верхнее или левое поле первого элемента в контейнере. Точно так же правое или нижнее поле от последнего элемента в контейнере. Вы можете сделать это, вручную применив классы к HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )Обнуление «сверху» / «снизу» полезно для вертикального стека элементов, обнуление «слева» / «справа» полезно для горизонтальных строк (в общем). Но ... этот метод зависит от того, добавляете ли вы классы в HTML самостоятельно. Псевдоселекторы могут быть более менее навязчивым способом:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Вы можете заменить * более конкретными селекторами в соответствии с вашими потребностями.
«Каждый третий» и др.
Допустим, у вас есть плавающий блок из 9 элементов, 3 на 3. Очень часто вам может потребоваться удалить правое поле с 3-го, 6-го и 9-го элементов. Здесь может помочь псевдо-селектор nth-child:
* > :nth-child(3n+3) ( margin-right: 0; )Уравнение 3n + 3 работает так:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
и т. Д.
jQuery
jQuery использует селекторы CSS3, которые включают: first-child,: last-child и: nth-child (). Это означает, что в браузерах, которые не поддерживают или не поддерживают эти селекторы полностью, они БУДУТ работать в jQuery, поэтому вы можете заменить поддержку CSS на поддержку JavaScript. Например:
$("* > :nth-child(3n+3)").css("margin-right", 0);Поддержка браузера
: first-child и: last-child работают в последней версии всех основных браузеров, но не в IE 6.: first-child поддерживается в IE 7+. : nth-child работает в Safari 3+, Firefox 3.5+ и Chrome 1+, но все еще не работает в IE8.
Также см. Статью Дэвида Оливера.