依照我們對CSS優先權的理解，最後定義的CSS 樣式將會覆蓋在其先前定義的所有已經存在、或與之衝突的樣式，例如下面這個例子：
| 以下為引用的內容： Example Source Code: p { color: red; background: yellow } |
以上的段落最終將呈現綠色的字體，並帶有黃色的背景，這是因為最後定義的color:green 將先前定義的red 覆蓋掉了，至於黃色背景為何沒有消失，那是因為第二個p 的定義中並沒有與之衝突的定義，因此它還是有效的。
我們看運行效果：
| 以下為引用的內容： Source Code to Run: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http ://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>admin5</title>< style type="text/css">p { color: red; background: yellow }p { color: green }</style></head><body><p>admin5</p></body></ html> <p class="red green blue">www.admin5.com</p> <p class="green blue red">admin5</p> <p class="blue red green">www.admin5.com</p> |
或許你認為你已經理解了。你真的懂了嗎？好，我們來做個小測試。
| 以下為引用的內容： Example Source Code: .red { color: red } .green { color: green } .blue { color: blue } …… <p class="red green blue">admin5</p> <p class="green blue red">站長的學習樂園</p> <p class="blue red green">www.admin5.com</p> |
請問，最終顯示的時候，上面三段的文字都會呈現何種顏色呢？
請不要急著運行下面的程式碼，你思考思考，會是什麼色彩？
好了，你已經思考定了，我們看運行的效果：
| 以下為引用的內容： Source Code to Run: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http ://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>www.admin5.com< /title><style type="text/css">.red { color: red }.green { color: green }.blue { color: blue }</style></head><body><p class=" red green blue">admin5</p><p class="green blue red">站長學習樂園</p><p class="blue red green">www.admin5.com</p></body ></html> |
答案是它們都顯示為blue ，也就是藍色，儘管每個段落都以不同順序應用了三個段落樣式，看上去應該按照應用樣式的順序來決定顏色，比如，第一個顯示為blue ，第第二個顯示為red ，第三個顯示為green ，其實這是錯誤的，這與應用樣式的順序無關，它們最終都聽從最後指定的樣式，顏色皆為blue ！以後遇到類似的問題請不要苦惱了，因為上面的試驗已經給了你答案。