Используя последний дочерний селектор

Мнение: Не определения функции наличия и типы возврата могут привести к гибкому и читаемому коду.

Это мнение, вероятно, применяется больше к интерпретируемым языкам, чем скомпилированный. Требование типа возврата и списка аргумента функции, является большим для вещей как intellisense к автоматическому документу Ваш код, но они - также ограничения.

Теперь не понимают меня превратно, я не говорю, выбрасывают типы возврата или списки аргументов. У них есть свое место. И 90% времени они - больше преимущества, чем помеха.

существуют времена и места, когда это полезно.

106
задан TylerH 24 February 2015 в 19:59
поделиться

6 ответов

Псевдокласс : last-child по-прежнему нельзя надежно использовать в браузерах. В частности, версии Internet Explorer <9 и Safari <3.2 определенно не поддерживают его , хотя Internet Explorer 7 и Safari 3.2 поддерживают : first-child ], что любопытно.

Лучше всего явно добавить к этому элементу класс last-child (или аналогичный) и применить вместо него li.last-child .

171
ответ дан 24 November 2019 в 03:45
поделиться

В качестве альтернативы использованию класса вы можете использовать подробный список, задав для дочерних элементов dt один стиль, а для дочерних элементов dd - другой. Ваш пример будет выглядеть так:

#refundReasonMenu #nav li:dd
{
  border-bottom: 1px solid #b5b5b5;
}

html:

<div id="refundReasonMenu">
  <dl id="nav">
        <dt><a id="abc" href="#">abcde</a></dt>
        <dd><a id="def" href="#">xyz</a></dd>
  </dl>
</div>

Ни один из методов не лучше другого, и это зависит только от личных предпочтений.

0
ответ дан 24 November 2019 в 03:45
поделиться
3
ответ дан 24 November 2019 в 03:45
поделиться

Трудно сказать, не видя остальной части вашего CSS, но попробуйте добавить ! Important перед цветом границы, чтобы получилось так:

#refundReasonMenu #nav li:last-child
{
  border-bottom: 1px solid #b5b5b5 !important;
}
-2
ответ дан 24 November 2019 в 03:45
поделиться

Другое решение, которое может сработать для вас, - это изменить отношения. Таким образом, вы должны установить границу для всех элементов списка. Затем вы должны использовать first-child, чтобы удалить границу для первого элемента. Первый дочерний элемент статически поддерживается во всех браузерах (это означает, что он не может быть добавлен динамически через другой код, но первый дочерний элемент является селектором CSS2, тогда как последний дочерний элемент был добавлен в спецификации CSS3)

Примечание. Это только работает так, как вы планировали, если у вас есть только 2 элемента в списке, как в вашем примере. К любому третьему элементу и далее будут применены границы.

76
ответ дан 24 November 2019 в 03:45
поделиться

Если вы думаете, что можете использовать Javascript, то, поскольку jQuery поддерживает last-child , вы можете использовать метод css jQuery, и, что хорошо, он будет поддерживать почти все браузеры

Пример кода:

$(function(){
   $("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})

Вы можете найти дополнительную информацию здесь: http://api.jquery.com/css/#css2

43
ответ дан 24 November 2019 в 03:45
поделиться
Другие вопросы по тегам:

Похожие вопросы: