CSS：list-style-type的顏色和大小控制介紹

今天做的頁面中有個和列表符很相似的小表徵圖，就想撒個懶用ul自己的style來替換上網查了下果然有此方法，所以記錄下來以備後用。

根據個人經驗總結了一下，如果顏色相同則可以使用此方法但是如果字型顏色和清單項目顏色不一樣的情況下還得使用圖表來實現，而且在li中加上line-height:Npx;在IE中列表和字型才能置中顯示；

引文：

去年我還是CSS菜鳥時，我曾問過高手，list-style-type可以改變顏色或大小嗎？高手曰：不能!
於是，我當時就在高手的指點下用圖片來實現。

因為是自學的，所以寫CSS不能像別人那麼正常化，所以我有機會出錯，也有機會發現。今天，我來說下如可改變list-style-type前樣式的顏色及大小。

再來看一下源碼

<ul class="artul">    <li><a href="#">這裡是SEO網站的文章列表標題目</a></li>    <li><a href="#">這裡是很長的SEO網站的文章列表標題目</a></li>    <li><a href="#">這裡是關於SEO網站的文章列表標題目</a></li>    <li><a href="#">這裡是一些最新的SEO網站的文章列表標題目</a></li>    <li><a href="#">這裡是近期SEO網站的文章列表標題目</a></li>    <li><a href="#">這裡是SEO常看的網站的文章列表標題目</a></li>    <li><a href="#">這裡是關於SEO網站的文章列表標題目</a></li>    <li><a href="#">這裡是一些最新的SEO網站的文章列表標題目</a></li>    </ul>

對應的CSS

第一張圖CSS

.ul {margin:0;padding:0 0 0 15px;color:#ddd;font-size:12px;color:#FFFF00;list-style-type: square }.ul li {border-bottom:1px dotted #999;}

第二張圖CSS

.ul {margin:0;padding:0 0 0 15px;color:#ddd;font-size:15px;color:#FF00FF;list-style-type: square }.ul li {border-bottom:1px dotted #999;}

相信大家都知道了，就改一下ul的color就可以改顏色，font-size就可以改大小(大小在IE6下不支援，firefox可以)