Избавляемся от последнего счетчика предметов

Question

У меня досадная проблема ... Я хочу, чтобы мои первые 4 элемента в списке были пронумерованы, но я хочу оставить пятый элемент без нумерации ... вот мое css:

#alternate_navigation ol
{
    display:block;
    padding:0;
    margin:0;
    counter-reset: item;
}

#alternate_navigation li
{
    display:block;
    padding:0px 0px 0px 10px; 
    margin:0;
    background: url('images/list_bg.jpg') no-repeat;
    height:19px;
    width:99%;
    border-bottom:1px solid #B9B5B2;
}

#alternate_navigation li:before 
{ 
  content: counter(item) ". "; 
  counter-increment: item ;
}

РЕЗУЛЬТАТ:

1. Онлайн бронирование
2. Заказ купона
3. Печать букв
4. Отправка писем
5. Просмотр заказов

Как можно добиться, чтобы последний элемент не был пронумерован так:

1. Онлайн бронирование
2. Заказ купона
3. Печать букв
4. Отправка писем
   Просмотр заказов

и да HTML

<div id="alternate_navigation">
                   <ol>
                   <li><a href="#">Online Booking</a></li>
                   <li><a href="#">Coupon Ordering</a></li>
                   <li><a href="#">Print Letters</a></li>
                   <li><a href="#">Send Emails</a></li>
                   <li><a href="#">View orders</a></li>
                   </ol>
                   <div>

Спасибо за любой ответ

Answer 1

Вы можете применить класс css для сброса этого счетчика, как в следующем примере:

#alternate_navigation li.last:before
{ 
  content: ""; 
  counter-increment: none ;
}

Проверьте мой пример:

http://www.aeon -dev.org / Тесты / before_pseudo_ie.html

Answer 2

Возможно ли, что используемый вами браузер не поддерживает content, counter-reset, :before или counter-increment?

Я почти уверен, что IE нет, и я не уверен насчет других. Если это так, то вы просто получаете нумерованный список по умолчанию: короче говоря, браузер будет игнорировать более новый CSS.

Answer 3

После вашего текущего CSS, добавьте:

#alternate_navigation li:last-child:before {
    content: "";
    counter-increment: none;
}

Это должно 'сбросить' стиль для последнего элемента.

РЕДАКТИРОВАТЬ: Я должен только отметить, что это не будет работать в IE8 из-за использования : last-child . Если вам нужна совместимость с IE6 / 7/8, я бы использовал что-то вроде JQuery вместо ручной вставки разметки HTML.

Answer 4

Из любопытства, в таком случае, почему вы вообще используете счетчик сброса? Почему бы не установить

list-style: decimal;

и затем для вашего html добавьте класс к вашему последнему тегу <li>, например <li class="last">?

Тогда вы можете установить

li.last { list-style: none; }