css_counter.html 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>12.5b counter-increment </title>
  5. <meta http-equiv="Content-Style-Type" content="text/css">
  6. <style type="text/css">
  7. li:before {content: counter(ct1) "|" counter(ct2) "|" counter(ct3) "... ";}
  8. li {counter-increment: ct1;}
  9. li li {counter-increment: ct2 2;}
  10. li li li {counter-increment: ct3 -3;}
  11. </style>
  12. </head>
  13. <body>
  14. <h2>CSS2 Test Suite: 12.5 counter-increment </h2>
  15. [<A HREF="index.html">index page</A>] [<I>section</I>] [<A HREF="sec12-05a.htm">Previous</A>] [<A HREF="sec12-06-01.htm">Next</A>] [<A HREF="http://www.w3.org/TR/CSS2/generate.html#propdef-counter-increment">Specification</A>]
  16. <HR>
  17. <p>The style declarations contained within this page:</p>
  18. <pre>span:before {content: counter(ct1) "|" counter(ct2) "|" counter(ct3) "... ";}
  19. li span:before {counter-increment: ct1;}
  20. li li span:before {counter-increment: ct2 2;}
  21. li li li span:before {counter-increment: ct3 -3;}
  22. </pre>
  23. <hr>
  24. <p>
  25. The list items in the following set of lists all have 'span' elements, and each 'span' should be preceded with generated content in the form "a|b|c... " where the letters are incremented numbers. "a" numbers increment in ones, "b" in twos, and "c" in negative threes. Note that counters are <strong>not</strong> reset for each sublist, or at any point, and so should use the default '0' as their base point.
  26. </p>
  27. <ul>
  28. <li><span>list item</span></li>
  29. <li><span>list item</span></li>
  30. <li><span>list item</span>
  31. <ul>
  32. <li><span>list item</span></li>
  33. <li><span>list item</span></li>
  34. <li><span>list item</span>
  35. <ul>
  36. <li><span>list item</span></li>
  37. </ul>
  38. </li>
  39. <li><span>list item</span></li>
  40. <li><span>list item</span>
  41. <ul>
  42. <li><span>list item</span></li>
  43. <li><span>list item</span></li>
  44. <li><span>list item</span></li>
  45. <li><span>list item</span></li>
  46. </ul>
  47. </li>
  48. <li><span>list item</span></li>
  49. <li><span>list item</span></li>
  50. </ul>
  51. </li>
  52. <li><span>list item</span></li>
  53. <li><span>list item</span></li>
  54. </ul>
  55. <hr>[<A HREF="index.html">index page</A>] [<I>section</I>] [<A HREF="sec12-05a.htm">Previous</A>] [<A HREF="sec12-06-01.htm">Next</A>] [<A HREF="http://www.w3.org/TR/CSS2/generate.html#propdef-counter-increment">Specification</A>]
  56. <HR>
  57. </body>
  58. </html>