CSS list-style-type property

Regarding the compatibility of the type attribute of the ordered list , the CSS list-style-type attribute style can solve the compatibility problem of the type attribute of the <ol> element of the ordered list.

The type of bullets in the ordered list , including 1, A, a, I, i, commonly used Arabic numerals 1, 2, 3, English letters a, b, c, uppercase English letters A, B, C, Roman letters i, ii, iii, iv, capital Roman letters I, II, III, IV

As mentioned earlier, although the type attribute is deprecated, all browsers support the type attribute.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的list-style-type</title>
    <style type="text/css">
        ul.circle {list-style-type:circle}
        ul.square {list-style-type:square}
        ol.upper-roman {list-style-type:upper-roman}
        ol.lower-alpha {list-style-type:lower-alpha}
    </style>
</head>
<body>
<p>Type circle:</p>
<ul class="circle">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>

<p>Type square:</p>
<ul class="square">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>

<p>Type upper-roman:</p>
<ol class="upper-roman">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<p>Type lower-alpha:</p>
<ol class="lower-alpha">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>
</body>
</html>

Set different list styles through CSS , so as to achieve the same effect as the type attribute of the ordered list <ol>.

[Both ordered lists and unordered lists can be applied]

Compatible: All browsers support the list-style-type attribute.

none	Unmarked.
disc	default. Markers are filled circles.
circle	Markers are hollow circles.
square	Markers are solid squares.
decimal	Markers are numbers.
decimal-leading-zero	Numeric marks starting with 0. (01, 02, 03, etc.)
lower-roman	Lowercase Roman numerals (i, ii, iii, iv, v, etc.)
upper-roman	Uppercase Roman numerals (I, II, III, IV, V, etc.)
lower-alpha	The marker is lower-alpha (a, b, c, d, e, etc.)
upper-alpha	The marker is upper-alpha (A, B, C, D, E, etc.)
lower-greek	Lowercase Greek letters (alpha, beta, gamma, etc.)
lower-latin	Lowercase Latin letters (a, b, c, d, e, etc.)
upper-latin	Uppercase Latin letters (A, B, C, D, E, etc.)
hebrew	Traditional Hebrew Numbering
armenian	Traditional Armenian Numbering
georgian	Traditional Georgia numbering (an, ban, gan, etc.)
cjk-ideographic	simple ideographic numbers
hiragana	The tokens are: a, i, u, e, o, ka, ki, etc. (Japanese katakana)
say	The marks are: A, I, U, E, O, KA, KI, etc. (Japanese katakana)
hiragana-iroha	The marks are: i, ro, ha, ni, ho, he, to, etc. (Japanese katakana)
katakana-iroha	Labels are: I, RO, HA, NI, HO, HE, TO, etc. (Japanese katakana)

Extension: new attribute for ordered list <ol>

<ol> ordered list

[H5 new attributes]

①reversed---Specify that the list order is descending. (9,8,7...)

Compatibility: Currently only Chrome and Safari 6 support the reversed attribute.

<ol reversed>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

②start--- specifies the starting value of the ordered list

Compatibility: Although the start attribute is deprecated, the start attribute is supported by all browsers. NOTE: Currently, there is still no CSS alternative to the start property.

<ol start="5" reversed>
    <li>HTML</li>
    <li>XHTML</li>
    <li>CSS</li>
</ol>

③type---- specifies the type of bullets in the ordered list , including 1, A, a, I, i

Note: Although the type attribute is deprecated, the type attribute is supported by all browsers

<ol type="I">
   <li>HTML</li>
   <li>XHTML</li>
   <li>CSS</li>
</ol>

CSS list-style-type property

Guess you like