8. List

List分為ordered跟unordered兩種，做個例子:

<ol class="css8_1"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>Node.js</li> <li>PHP</li> </ol> <br> <ul class="css8_2"> <li>Apple</li> <li>Banana</li> <li>Cat</li> <li>Dog</li> <li>Elephant</li> </ul>

css code:

ol.css8_1{ list-style-type: upper-alpha; } ul.css8_2{ list-style-type: square; }

1. HTML
2. CSS
3. JavaScript
4. Node.js
5. PHP

• Apple
• Banana
• Cat
• Dog
• Elephant

首先可以改變列表前標點的型態，使用list-style-type:upper-roman; 這個語法。
ordered的選擇有

1. decimal(default)
2. decimal-leading-zero
3. lower-roman
4. upper-roman
5. lower-alpha
6. upper-alpha
7. lower-greek
8. armenian
9. cjk-ideographic
10. georgian
11. hebrew
12. hiragana
13. hiragana-iroha
14. katakana
15. katakana-iroha
16. none

unordered的選擇有

• disc(default)
• square
• circle
• none

除了使用內定圖形外，可以使用其他圖案。 使用list-style-image: url('filename');語法，例如:

• Apple
• Banana
• Cat
• Dog
• Elephant

ul.css8_5{ list-style-image: url('./images/itemicon1.jpg'); }
請先行使用軟體將圖修改至合適大小。
此外，若是項目內容文字超過一行，可以使用

1. list-style-position: outside;(第二行文字對齊上一行文字)
2. list-style-position: inside;(第二行文字對齊項目標號)

來控制標點位置。

顏色修飾

除了可以修改項目標示之外，文字可以用顏色來修飾，當然背景也可以。例如:

<ol class="css8_7"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>Node.js</li> <li>PHP</li> </ol>

css code:

ol.css8_7{ list-style-type: georgian; background: olive; color:white; padding: 10px 10px 10px 40px; } ol.css8_7 li{ background: #0f00f0; padding-left: 20px; margin: 5px; }

1. HTML
2. CSS
3. JavaScript
4. Node.js
5. PHP

nth-child() selector

何謂nth-child() selector?在ordered list中，每一個<li></li>可視為其直接後代(child)， 為一樹狀結構。我們可以使用nth-child()來選擇後代。舉例說明，一樣使用之前的list。
ol.css8_8 li:nth-child(2){ background: #f0a092; }

1. HTML
2. CSS
3. JavaScript
4. Node.js
5. PHP

選擇第二個然後改變背景顏色。

---

參數除了給數字之外，還可以使用關鍵字odd, even， 或是公式例如3n+1等。 也可以使用first-child或last-child 替換nth-child()來表示第一或最後一個元件。或是使用nth-last-child() 來選擇自後往前算的第n個小孩。 如以下範例:

ol.css8_9 li:nth-child(odd){ background: #f0a092; }

1. HTML
2. CSS
3. JavaScript
4. Node.js
5. PHP

---

ol.css8_10 li:nth-child(3n+1){ background: #f0a092; }

1. HTML
2. CSS
3. JavaScript
4. Node.js
5. PHP
6. Python
7. Java
8. C++
9. Bash

---

ol.css8_11 li:first-child{ background: #f0a092; }

1. HTML
2. CSS
3. JavaScript
4. Node.js
5. PHP
6. Python
7. Java
8. C++
9. Bash

---

ol.css8_12 li:nth-last-child(2){ background: #f0a092; }

1. HTML
2. CSS
3. JavaScript
4. Node.js
5. PHP
6. Python
7. Java
8. C++
9. Bash

---

這樣的方式可以不僅用在列表，例如下例:

<div class="css8_13"> <p>Ant Colony Optimization</p> <p>Genetic Algorithm</p> <p>Tabu Search</p> <p>Particle Search Optimization</p> <p>Simulated Annealing</p> <p>Harmony-Genetic</p> </div>

css code:

div.css8_13{ border: 3px solid blue; background: #a0f092; padding: 5px 20px; } div.css8_13 p:nth-child(even){ background: #f0a092; padding: 3px; } div.css8_13 p:nth-child(odd){ background: #90a0f0; padding: 3px; }