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

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 ;
}

РЕЗУЛЬТАТ:

<Ол>

Онлайн бронирование

Заказ купона

Печать писем

Отправка электронных писем

Просмотр заказов

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

<Ол>

Онлайн бронирование

Заказ купона

Печать писем

Отправить электронную почту
  Просмотр заказов

и да 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-child:before {
    content: "";
    counter-increment: none;
}

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

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

Answer 2

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

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

Answer 3

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

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

Посмотрите мой пример:

http://www.aeon-dev.org/tests/before_pseudo_ie.html

Answer 4

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

list-style: decimal;

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

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

li.last { list-style: none; }