Li Last Item Counter를 제거합니다

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

마지막 요소의 스타일을 '재설정'해야합니다.

편집하다: 나는 이것이 사용하기 때문에 IE8에서 작동하지 않을 것이라고 언급해야합니다. :막내. IE6/7/8 호환성이 필요한 경우 HTML 마크 업을 수동으로 삽입하는 대신 jQuery와 같은 것을 사용합니다.

Answer 2

사용중인 브라우저가 지원하지 않을 수 있습니까? content, counter-reset, :before, 또는 counter-increment?

나는 IE가 그렇지 않다고 확신하며, 다른 사람들에 대해서는 확신이 없습니다. 이 경우 기본 번호 번호가 매겨진 목록을 받고 있습니다. 간단히 말해서 브라우저는 최신 CS를 무시합니다.

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