<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
.main{width:200px; height:200px; background:black;}
.main ul li{background:white;}
.on{background:blue;}
</style>
<body>
<div class="main">
<ul>
<li class="on">第一行文字的顏色為什麼不是blue</li>
<li>第一行文字</li>
<li>第一行文字</li>
<li>第一行文字</li>
</ul>
</div>
</body>
</html>
第一行文字的顏色為什麼不是blue?
明明給第一行的li定義class了啊
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
.main{width:200px; height:200px; background:black;}
.main ul li{background:white;}
#on{background:blue;}
</style>
<body>
<div class="main">
<ul>
<li id="on">第一行文字的顏色是blue了</li>
<li>第一行文字</li>
<li>第一行文字</li>
<li>第一行文字</li>
</ul>
</div>
</body>
</html>
用id選擇器就好了
難道.main ul li 的優先級大於 class='on' ??
從CSS代碼存放位置看權重優先級：內嵌樣式 > 內部樣式表 > 外聯樣式表。其實這個基本可以忽視之，大部分情況下CSS代碼都是使用外聯樣式表。
從樣式選擇器看權重優先級：important > 內嵌樣式 > ID > 類 > 標簽 | 偽類 | 屬性選擇 > 偽對象 > 繼承 > 通配符。
important的權重為1,0,0,0
ID的權重為0,1,0,0
類的權重為0,0,1,0
標簽的權重為0,0,0,1
偽類的權重為0,0,1,0
屬性的權重為0,0,1,0
偽對象的權重為0,0,0,1
通配符的權重為0,0,0,0
(A) .main ul li{background:white;} /*0,0,1,2*/ /*= 12*/
(B) .on{background:blue;} /*0,0,1,0*/ /*= 10*/
(C) #on{background:blue;} /*0,1,0,0*/ /*= 100*/
所以優先級：C>A>B
參考文章如下：
1、http://www.cnblogs.com/52css/archive/2012/06/07/2540550.html
http://wenku.baidu.com/link?url=SxULPRpoqoAEdTSuKxxlJqCDecVogWdRc3Hp_RxFkht4tsIi_mve1omPaxA4QQ4T1jUop8Ms7WPx0trA6jrf2SCVpT47beSmiPoV_H5IDb_
