今天在制作一個zblog模板的時候，用到了li前加點并且觸發(fā):hover變色，特來分享下方法，其實很簡單！
HTML：
<ul> <li><a href="#">純CSS ul li前點加顏色和變色(不使用背景圖)</a></li> <li><a href="#">純CSS ul li前點加顏色和變色(不使用背景圖)</a></li> </ul>
CSS：
.ul li{list-style-type: square;color: #0099ff;font-size: 16px;line-height: 30px;}
.ul li a{color: #333;font-size: 14px;}
.ul li:hover{color: #ff6900;}
.ul li:hover a{color: #ff6900}第一行代碼：
list-style-type: square;就是加前綴正方形點，如果要加圓點呢？要加空心圓呢，要加 1 2 3阿拉伯?dāng)?shù)字呢？
list-style-type :disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
取值：
disc : CSS1 默認(rèn)值。實心圓
circle : CSS1 空心圓
square : CSS1 實心方塊
decimal : CSS1 阿拉伯?dāng)?shù)字
lower-roman : CSS1 小寫羅馬數(shù)字
upper-roman : CSS1 大寫羅馬數(shù)字
lower-alpha : CSS1 小寫英文字母
upper-alpha : CSS1 大寫英文字母
none : CSS1 不使用項目符號
color: #0099ff; 就是為li加的顏色，前綴點就會被變色。
font-size:就是li的大小了
line-height就是行高
第二行：
.ul li a{color: #333;font-size: 14px;} 是為li之內(nèi)的a標(biāo)簽賦值的，包括顏色以及字號，但與li帶的前綴點無關(guān)，只作用于a標(biāo)簽內(nèi)的文字
第三行：
.ul li:hover{color: #ff6900;} 就是觸發(fā)li后li內(nèi)值改變顏色，包括前綴點
第四行：
.ul li:hover a{color: #ff6900} li觸發(fā):hover后，單獨為a標(biāo)簽內(nèi)的文章變色！
以上就是本篇《純CSS ul li前點加顏色和變色(不使用背景圖)》的內(nèi)容了！