添加li的所有属性

Question

您好我正在尝试添加单个ul中的li的所有属性。

HTML:

<ul>

<li>Sample Li to have all the properties</li>

</ul>

CSS:

ul li{
  list-style-type : disc | circle | lower-aplha etc...,
}

是否可以添加？

Answer 1

可以使用CSS counters。

ul {
    counter-reset: my-counter;
    list-style-type: none;
}
ul li:before {
    content: counter(my-counter, disc)
             counter(my-counter, circle)
             counter(my-counter, lower-alpha) "." 
             counter(my-counter, decimal ) ".";
             /* etc... */
    counter-increment: my-counter;
}

jsFiddle Demo

---

可用的列表类型：

disc        (• • •)
circle      (○ ○ ○)
square      (▪ ▪ ▪)
decimal     (1 2 3)
decimal-leading-zero (01, 02, 03)
lower-roman (i ii iii)
upper-roman (I II III)
lower-greek (α β γ)
lower-latin (a b c)
upper-latin (A B C)
armenian    (Ա Բ Գ)
georgian    (ა ბ გ)
lower-alpha (a b c)
upper-alpha (A B C)

---

进一步阅读：

• Using CSS counters。
• Numbering in style。

Answer 2

请参阅此示例，您可以在ul

中使用多个li

<ul>
  <li>first item</li>
  <li>second item      <!-- Look, the closing </li> tag is not placed here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem      <!-- Same for the second nested unordered list! -->
        <ul>
          <li>second item second subitem first sub-subitem</li>
          <li>second item second subitem second sub-subitem</li>
          <li>second item second subitem third sub-subitem</li>
        </ul>
      </li>           <!-- Closing </li> tag for the li that contains the third unordered list -->
      <li>second item third subitem</li>
    </ul>
  </li>               <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ul>