CSS覆蓋公共樣式中的某個屬性
阿新 • • 發佈：2017-07-31
1.0 gree code 標題 oct 綠色 itl 字體 clas
CSS如何覆蓋公共樣式中的某個屬性？利用CSS樣式的優先級。
如下例子：
<!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>無標題文檔</title> <style type="text/css"> .x{color: red;} .a .x{color:blue;} .a .b .x{color:green;} </style> </head> <body> <div class="x">你好</div> <div class="a"> <div class="x">你好</div> </div> <div class="b"><div class="x">你好</div> </div> <div class="a"> <div class="b"> <div class="x">你好</div> </div> </div> </body> </html>
頁面上字體顏色從上到下，依次是紅、藍、紅、綠
有層級關系的樣式，越精確的優先級越高。
利用這一個 特點，當公共樣式中，當有需要特殊處理的樣式，可以使用此種方法：
在當前樣式前的父級，添加一個獨一無二的樣式名稱。
另外，當父級中有多個樣式的時候，如下：
<div class="a b"> <div class="x">你好</div> </div>
可以定義兩個父級樣式中的任何一個
<style type="text/css"> .a .x{color:blue;} .b .x{color:green; </style>
如果同時定義了兩個父級樣式，這個時候字體的顏色就與css中，這兩個父級樣式的順序有關了，後加載的樣式優先，此時後加載的是.b .x，所以字體顏色是綠色
CSS覆蓋公共樣式中的某個屬性