Как изменить CSS для элемента ДО последнего?

Question

Мне нравится получать максимально чистый код, если это возможно, либо с помощью обычного CSS или jQuery. Он должен быть кросс-браузерным и работать в IE.

Разметка - это крошка.

<div id="breadcrumb">
  <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">Sports</a></li>
     <li><a href="#">Football</a></li>
     <li><a href="#">Leagues/a></li>
  </ul>
</div>

Итак, я хочу оформить эту хлебную крошку в 3 этапа.

• первый a элемент
• между a предметов (поэтому не первый и не последний)
• последний элемент

Я не мог понять это с помощью обычного CSS, потому что IE не поддерживает псевдоклассы, такие как: first-child и т. Д.

Итак, я попробовал jQuery и добился некоторого успеха, используя:

$("#breadcrumb li:last > a").addClass("last");

Но я не могу понять, как нацелиться на них, потому что, если я стилизую все # breadcrumb li> a с классом "middle", то использование .addClass больше не работает. 1035 *

Есть предложения?

Answer 1

Вы можете использовать :not() с :first и :last, например:

$("#breadcrumb li:first > a").addClass("first");
$("#breadcrumb li:not(:first,:last) > a").addClass("middle");
$("#breadcrumb li:last > a").addClass("last");

Answer 2

Я предлагаю изменить представление о проблеме:

• Стиль всех a элементов
• Переопределить стиль для: первый ребенок
• Переопределить стиль для: last

Answer 3

Чтобы расширить некоторые ответы здесь, у вас есть две проблемы:

1. Вы хотите стилизовать то, что не первое и не последнее
2. Вы хотите, чтобы это работало в IE.

Поэтому я рекомендую двухэтапный подход:

Сначала установите HTML + CSS соответственно

<div id="breadcrumb">
  <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">Sports</a></li>
     <li><a href="#">Football</a></li>
     <li><a href="#">Leagues/a></li>
  </ul>
</div>

#breadcrumb li a { /* middle rules here */ }
#breadcrumb li:first-child a { /* first child rules here */ }
#breadcrumb li:last-child a { /* last child rules here */ }

Во-вторых, чтобы исправить для IE,

<div id="breadcrumb">
  <ul>
     <li class="first-child"><a href="#">Home</a></li>
     <li><a href="#">Sports</a></li>
     <li><a href="#">Football</a></li>
     <li class="last-child"><a href="#">Leagues/a></li>
  </ul>
</div>

#breadcrumb li a { /* middle rules here */ }
#breadcrumb li:first-child a { /* first child rules here */ }
#breadcrumb li:last-child a { /* last child rules here */ }

/* IE part */
#breadcrumb li.first-child a { /* first child rules here */ }
#breadcrumb li.last-child a { /* last child rules here */ }

Если вы не можете добавить классы first-child и last-child на сервер (или статически), я бы использовал этот jQuery JS:

$('#breadcrumb li:first-child').addClass('first-child');
$('#breadcrumb li:last-child').addClass('last-child');

Наконец, я бы использовал условные комментарии или какое-либо обнаружение функций (не уверен, что обнаружение функций будет работать), чтобы гарантировать, что только браузеры, нуждающиеся в исправлении, получают первое / последнее исправление. Вы можете создать div вне экрана и посмотреть, будут ли работать первые / последние правила.

Обратите внимание, что код jQuery можно легко адаптировать, если вы часто используете first-child / last-child, вы можете добавить эти классы по всему DOM в две строки.

Редактировать Я протестировал свое решение и обнаружил, что IE8 не может анализировать правила CSS, если у вас есть: last-child в списке правил, разделенных запятыми, поэтому, к сожалению, вам нужно продублировать правила для IE , Однако это облегчает удаление этой части базы кода, если вы больше не заботитесь о поддержке IE8 (вздох ... один день).