문제
나는 성가신 문제가 있습니다. 목록에있는 첫 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>
응답에 감사드립니다
해결책
현재 CSS 후에는 다음을 추가합니다.
#alternate_navigation li:last-child:before {
content: "";
counter-increment: none;
}
마지막 요소의 스타일을 '재설정'해야합니다.
편집하다: 나는 이것이 사용하기 때문에 IE8에서 작동하지 않을 것이라고 언급해야합니다. :막내. IE6/7/8 호환성이 필요한 경우 HTML 마크 업을 수동으로 삽입하는 대신 jQuery와 같은 것을 사용합니다.
다른 팁
사용중인 브라우저가 지원하지 않을 수 있습니까? content
, counter-reset
, :before
, 또는 counter-increment
?
나는 IE가 그렇지 않다고 확신하며, 다른 사람들에 대해서는 확신이 없습니다. 이 경우 기본 번호 번호가 매겨진 목록을 받고 있습니다. 간단히 말해서 브라우저는 최신 CS를 무시합니다.
이 예와 같이 CSS 클래스를 통해 해당 카운터를 재설정 할 수 있습니다.
#alternate_navigation li.last:before
{
content: "";
counter-increment: none ;
}
내 예 확인 :
호기심이 없어도이 경우 왜 카운터 리셋을 사용하고 있습니까? 설정하지 않는 이유는 무엇입니까?
list-style: decimal;
그리고 HTML의 경우 마지막에 클래스를 추가하십시오. <li>
태그처럼 <li class="last">
?
그런 다음 설정할 수 있습니다
li.last { list-style: none; }
제휴하지 않습니다 StackOverflow