html - 添加 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 计数器。

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 演示

---

可用列表类型：

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)

---

进一步阅读：

• 使用 CSS 计数器。
• 编号风格。

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>