CSS樣式選擇器的優先順序順序
阿新 • • 發佈：2018-12-25
樣式（css）是一種按照優先順序來進行載入的語言。
css各種選擇器的優先順序順序：（由上到下，優先順序順序依次降低）
不同級別：
1.在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
例如：
2.作為style屬性寫在元素內的樣式
例如：
#test {
background-color:#cccccc;
}
.ceshi{
background-color:red !important;
}
div{
background-color:yellow;
}
2.作為style屬性寫在元素內的樣式
- 行內元素不會應用width屬性，其長度是由內容撐開的
- 行內元素不會應用height屬性，其高度也是由內容撐開的，但是高度可以通過line-height調節
- 行內元素的padding屬性只用padding-left和padding-right生效，padding-top和padding-bottom會改變元素範圍，但不會對其它元素造成影響
- 行內元素的margin屬性只有margin-left和margin-right有效，margin-top和margin-bottom無效
- 行內元素的overflow屬性無效，這個不用多說了
- 行內元素的vertical-align屬性無效（height屬性無效）
- 對於absolute和fixed定位的(固定大小，設定了width和height屬性)元素，如果設定了top和left屬性，那麼設定bottom和right值就沒有作用了，應該是top和left優先順序高，否則同時寫了瀏覽器怎麼知道按照誰定位
- 對於absolute和fixed定位的元素，如果設定了top、left、bottom、right的值後margin屬性也就不起作用了
- 對於absolute和fixed定位的元素，如果設定了top、left、bottom、right的值後float屬性同樣會失效
- 塊元素如果設定了float屬性或者是absolute、fixed定位，那麼vertical-align屬性不再起作用
- px是pixel縮寫，是基於畫素的單位.在瀏覽網頁過程中，螢幕上的文字、圖片等會隨螢幕的解析度變化而變化，一個100px寬度大小的圖片，在800×600解析度下，要佔螢幕寬度的1/8，但在1024×768下，則只佔約1/10。所以如果在定義字型大小時，使用px作為單位，那一旦使用者改變顯示器解析度從800到1024，使用者實際看到的文字就要變“小”（自然長度單位），甚至會看不清，影響瀏覽。
- pt是point(磅)縮寫，是一種固定長度的度量單位,大小為1/72英寸。如果在web上使用pt做單位的文字，字型的大小在不同螢幕（同樣解析度）下一樣，這樣可能會對排版有影響，但在Word中使用pt相當方便。因為使用Word主要目的都不是為了螢幕瀏覽，而是輸出列印。當列印到實體時，pt作為一個自然長度單位就方便實用了：比如Word中普通的文件都用“宋體 9pt”，標題用“黑體 16pt”等等，無論電腦怎麼設定，打印出來永遠就是這麼大。
- em：是相對單位，是一個相對長度單位，最初是指字母M的寬度，所以叫em，現指的是字元寬度的倍數，用法類似百分比，如：0.8em, 1.2em,2em等。通常1em=16px（瀏覽器預設字型大小16px），em是指父元素的字型大小。在一個頁面上給定了一個父元素的字型大小,這樣就可以通過調整一個元素來成比例的改變所有元素大小.它可以自由縮放,比如用來製作可伸縮的樣式表。類似還有ex的概念，ex 相對於字元“x”的高度，此高度通常為字型尺寸的一半。
- rem：rem是CSS新增的，em是相對於其父元素來設定字型大小的，這樣就會存在一個問題，進行任何元素設定，都有可能需要知道他父元素的大小，在多次使用時，就會帶來無法預知的錯誤風險。而rem是相對於根元素<html>(r:root)，使用rem我們只需要在根元素確定一個參考值，然後就可以控制整個html頁面所有字型了。