在HTML入門教程中,有序列表和無序列表的列表項符號都是使用type屬性來定義的。我們先來回顧一下。
語法:
<ol type="屬性值"> <li>有序列表項</li> <li>有序列表項</li> <li>有序列表項</li> </ol>
語法:
<ul type="屬性值"> <li>有序列表項</li> <li>有序列表項</li> <li>有序列表項</li> </ul>
type屬性來定義列表項符號,那是在元素屬性中定義的。但是我們之前說過,標簽和樣式是應該分離的,那在CSS中怎麼定義列表項符號呢?
在CSS中,不管是有序列表還是無序列表,都統一使用list-style-type屬性來定義列表項符號。
語法:
list-style-type:屬性值;
說明:
list-style-type屬性取值如下:
舉例1:
在線測試 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>list-style-type屬性</title> <style type="text/css"> ol{list-style-type: lower-roman ;} ul{list-style-type: circle ;} </style> </head> <body> <p>有序列表</p> <ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol> <p>無序列表</p> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html>
舉例2:
在線測試 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>list-style-type屬性</title> <style type="text/css"> ol,ul{list-style-type:none;} </style> </head> <body> <p>有序列表</p> <ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol> <p>無序列表</p> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html>
分析:
“ol,ul{list-style-type:none;}”使用的是CSS選擇器中的群組選擇器。多個不同元素定義了相同的CSS樣式,就可以使用群組選擇器。在群組選擇器中,元素之間是用逗號隔開,記住是英文的逗號,中文逗號無效。
使用“list-style-type:none”這個小技巧可以去除列表項默認的符號,在實際開發中,我們經常要用到。