css 優先順序

css優先順序

很早以前就知道對同乙個元素設定樣式時應用樣式的優先順序是

內聯樣式》頁內樣式》大於外聯樣式

id選擇器》class選擇器》標籤選擇器

很簡單 一筆帶過

但事實上 如果是做前端開發的 還需要更了解詳細些

1. !important 是擁有絕對最高優先順序的 (設定此值後無論id選擇器還是內聯樣式都無法撼動它)

.set_size

2.如果不小心在寫樣式時將外聯樣式放在了自己單獨指定的頁內樣式前面 外聯樣式優先順序將高於頁內樣式 這主要是引入css庫時需要注意的

但此時內聯樣式的優先順序仍高於外聯樣式的類選擇器優先順序

頁內樣式的id選擇器仍高於外聯樣式的類選擇器

此時 內聯》外聯id>頁內id>外聯類選擇》頁內類選擇

3.*萬用字元選擇器,會選擇頁面所有的元素 相當於對頁面的每乙個元素都應用了一次此樣式

很強大,但不好  正確的使用姿勢應該是與後代選擇器配合使用 如

.foot_thin *

正常情況下

內聯》頁內id>外部id>頁內類選擇》外部類選擇......

後代選擇器優先順序高於類選擇器

p span

子選擇器優先順序和後代選擇器相等(在寫法相同的情況下)

p > span

同一css檔案中此時是red還是blue 取決於誰寫在誰的上一行 在後面的優先順序不會更高 但瀏覽器後渲染 定下來了後面的樣式

優先順序會疊加

p.is > span 此時優先順序會加上類選擇器的優先順序

id>後代選擇

256個類選擇器乾掉乙個id選擇器

絕不忘記目的( never forgotten purpose )

需要了解css優先順序是因為我們需要準確的精簡冗餘低的便利的可重用的高效的選擇元素 從而應用樣式 構建乙個棒棒的web站點(當然效能優化這方面的東西很大重頭戲在後台)

但是這不代表執行在前端的東西就不用考慮效能 完全不去考慮前端的效能,這合適嗎？

答案顯而易見

效率從高到低為

id選擇器（#myid）

類選擇器（.myclassname）

標籤選擇器（div,h1,p）

相鄰選擇器（h1+p）

子選擇器（ul < li）

後代選擇器（li a）

萬用字元選擇器（*）

屬性選擇器（a[rel="external"]）

偽類選擇器（a:hover,li:nth-child）

但寫css的前端,大家基本不會業餘到用id選擇器

而偽類是有必要的而常用的

更多up可讀

or

css 優先順序

當我們的css樣式中，如果同個元素有兩個或以上衝突的css規則，瀏覽器有一些基本的規則來決定哪乙個非常特殊而勝出，也就是常講的css優先順序。一般情況下，你不必擔心css樣式衝突，但對於大型而且複雜的css樣式檔案，或有很多css檔案組成的，就非常有可能產生衝突。下面我們通過2個簡單的例項來了解一下...

css優先順序

今天在使用公司內部框架的時候，發現乙個問題。我在頁面的style元素裡面寫了乙個class選擇器，可是卻不起作用。使用f12檢視，發現是當前的樣式沒有起作用，而是被框架生成的樣式代替掉了。當然，寫內嵌的樣式肯定是沒問題。可問題就是，我明明在頁面內部寫了樣式，按照常理，應該是我手寫的類選擇器的優先順序...

css優先順序

css樣式分為 外部樣式，內部樣式，內聯樣式 選擇器優先權 1.內聯樣式表的權值最高 1000 2.id 選擇器的權值為 100 3.class 類選擇器的權值為 10 4.html 標籤選擇器的權值為 1 css 優先順序法則 a 選擇器都有乙個權值，權值越大越優先 b 當權值相等時，後出現的樣式...