[CSS] 當多個CSS檔案對同一個元素屬性進行設定，會發生什麼？
阿新 • • 發佈：2019-02-17
CSS作為Web前端的三劍客之一，有著極為重要的地位。它使得頁面的表現與內容很好地分離開來，如今各大瀏覽器對它的支援也日趨完善起來。
但是多處CSS檔案對同一個元素或者類的樣式進行修改的情況屢見不鮮，以至於在程式碼量成幾何倍增加時，有時會讓人產生迷惑感。下面舉個例子：
<!-- test.html --> <head> ... <link href="res/css/test1.css" type="text/css" rel="stylesheet"> <link href="res/css/test2.css" type="text/css" rel="stylesheet"> </head>
/* test1.css */
body { background: yellow; }
body { background: blue; }/* test2.css */
body { background: black; }
body { background: red; }這裡有四個地方對body元素的背景進行設定。在實際解析中，哪次設定將會被採用呢？
答案是最後一次，也就是test2.css中值為red的那次設定。因為在樣式中對同一個元素的屬性發生重複設定時，後一次會覆蓋前一次。在例子中，如果test1.css的引入順序在test2.css之後的話，則會發現背景顏色變成藍色了。