css優先級計算規則

梳理這部分是因為在使用組件模式開發h5應用會出現組件樣式修改未生效的問題，在解決樣式修改的問題前，需要理清楚CSS樣式生效的優先級。樣式根據引入和聲明需要分開介紹，分為 引入樣式優先級 和 聲明樣式優先級 。

濟南網站制作公司哪家好，找成都創新互聯公司！從網頁設計、網站建設、微信開發、APP開發、響應式網站建設等網站項目制作，到程序開發，運營維護。成都創新互聯公司從2013年成立到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選成都創新互聯公司。

引入樣式優先級

引入樣式優先級一般是在外部樣式、內部樣式、內聯樣式之間應用同一個樣式的情況是使用， 優先級如下：

外部樣式 | 內部樣式 內聯樣式

外部樣式 和 內部樣式 ，最后出現的優先級最高，例如：

!-- 內聯樣式 --spanstyle="color:red;"Hello/spanstyletype="text/css"/* 內部樣式 */h3{color:green;}/style!-- 外部樣式 style.css --linkrel="stylesheet"type="text/css"href="style.css"/

因此，對于一些重置的樣式集，比如 normalize.css/reset.css 必須寫在所有樣式的前面。

PS: 沒有外聯樣式， 參考 。

聲明樣式優先級

1. 大致的優先級

一般來說滿這個規則：

繼承不如指定

!important 內聯 ID Class|屬性|偽類 元素選擇器

:link、:visited、:hover、:active按照LVHA（LoVe HAte）順序定義

上面是優先級算法反映出的大致結果，在一般的開發中熟記即可。如果需要進一步研究原理，則了解下優先級算法。

2. 優先級算法

選擇器的特殊性值分為四個等級，如下：

等級標簽內選擇符ID選擇符Class選擇符/屬性選擇符/偽類選擇符元素選擇符

示例span style="color:red;"#text{color:red;}.text{color:red;} [type="text"]{color:red}span{color:red;}

標記位x,0,0,00,x,0,00,0,x,00,0,0,x

特點:

每個等級的初始值為0，

每個等級的疊加為選擇器出 現的次數相加

不可進位，比如0,99,99,99

依次表示為：0,0,0,0

每個等級計數之間沒關聯

等級判斷從左向右，如果某一位數值相同，則判斷下一位數值

如果兩個優先級相同，則最后出現的優先級高，!important也適用

通配符選擇器的特殊性值為：0,0,0,0

繼承樣式優先級最低 ，通配符樣式優先級高于繼承樣式

計算示例：

a{color: yellow;} /*特殊性值：0,0,0,1*/

div a{color: green;} /*特殊性值：0,0,0,2*/

.demo a{color: black;} /*特殊性值：0,0,1,1*/

.demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/

.demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/

#demo a{color: orange;} /*特殊性值：0,1,0,1*/

div#demo a{color: red;} /*特殊性值：0,1,0,2*/

生效示例：

ahref=""第一條應該是黃色/a!--適用第1行規則--divclass="demo"inputtype="text"value="第二條應該是藍色"/!--適用第4、5行規則，第4行優先級高--ahref=""第三條應該是黑色/a!--適用第2、3行規則，第3行優先級高--/divdivid="demo"ahref=""第四條應該是紅色/a!--適用第6、7行規則，第7行優先級高--/div

關于偽類LVHA的解釋

a標簽有四種狀態：鏈接訪問前、鏈接訪問后、鼠標滑過、激活，分別對應四種偽類:link、:visited、:hover、:active；

當鼠標滑過a鏈接時，滿足:link和:hover兩個偽類，要改變a標簽的顏色，就必須將:hover偽類在:link偽類后面聲明；

當鼠標點擊激活a鏈接時，同時滿足:link、:hover、:active三種狀態，要顯示a標簽激活時的樣式（:active），必須將:active聲明放到:link和:hover之后。因此得出LVHA這個順序。

這個順序能不能變？可以，但也只有:link和:visited可以交換位置，因為一個鏈接要么訪問過要么沒訪問過，不可能同時滿足，也就不存在覆蓋的問題。

在組件中的應用

目前的前端開發為了增加開發效率，會對常用組件進行封裝，此外，組件還會添加一些必要的結構樣式。但是業務的設計文稿中可不一定按照預先寫好的默認樣式，需要在開發業務時根據組件的DOM結構修改默認樣式，此時會出現樣式不生效的問題。

例如下面的結構，如果對Title直接增加樣式類，則肯定不會生效，因為Title的DOM結構為兩層(組件樣式定義規定不能使用ID選擇器，且類選擇器滿足最小標記原則)），故樣式最多為0,0,2,x。因此，樣式多層標記就可提高自定義樣式的優先級，例如下方的SCSS寫法。

Pageclass="test"Headerclass="test__header"NavbarTitleclass="test__header--title"Toolbar/Title/Navbar/HeaderContent/Content/Page

.test{.test__header{.test__header--title{height:100px;}}}

此外，對于Page組件的樣式標記策略推薦使用 金字塔形(樹形) ，比如上面的SCSS書寫，這樣可以保證內部自定義樣式不會受到外部干擾，減少不必要的麻煩。

鏈接：

19、css樣式的優先級

1、最近的祖先樣式比其他祖先樣式優先級高。

2、"直接樣式"比"祖先樣式"優先級高。

首先，我們需要知道有哪些選擇器：

1）ID 選擇器， 如 #id{}

2）類選擇器， 如 .class{}

3）屬性選擇器， 如 a[href="segmentfault.com"]{}

4）偽類選擇器， 如 :hover{}

5）偽元素選擇器， 如 ::before{}

6）標簽選擇器， 如 span{}

7）通配選擇器， 如 *{}

3、內聯樣式 ID 選擇器 類選擇器 = 屬性選擇器 = 偽類選擇器 標簽選擇器 = 偽元素選擇器

4、當一個標簽同時被多個選擇符選中，我們便需要確定這些選擇符的優先級。我們有如下規則：計算選擇符中 ID 選擇器的個數（a），計算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個數之和（b），計算選擇符中標簽選擇器和偽元素選擇器的個數之和（c）。按 a、b、c 的順序依次比較大小，大的則優先級高，相等則比較下一個。若最后兩個的選擇符中 a、b、c 都相等，則按照"就近原則"來判斷。

5、屬性后插有?!important?的屬性擁有最高優先級。若同時插有?!important，則再利用規則 3、4 判斷優先級。

Css中樣式的優先級

當在一個樣式聲明中使用一個 !important 規則時，此聲明將覆蓋任何其他聲明。雖然，從技術上講， !important 與優先級無關，但它與最終的結果直接相關。使用 !important 是一個 壞習慣 ，應該盡量避免，因為這破壞了樣式表中的固有的級聯規則 使得調試找bug變得更加困難了。當兩條相互沖突的帶有 !important 規則的聲明被應用到相同的元素上時，擁有更大優先級的聲明將會被采用。

一些經驗法則：

什么的情況下可以使用 !important：

A) 覆蓋內聯樣式

你的網站上有一個設定了全站樣式的 CSS 文件，同時你（或是你同事）寫了一些很差的內聯樣式。

全局的CSS文件會在全局范圍內設置網站的外觀，而直接在各個元素上定義的內聯樣式可能會覆蓋您的全局CSS文件。 內聯樣式和!important都被認為是非常不好的做法，但是有時你可以在CSS文件里用!important去覆蓋內聯樣式。

在這種情況下，你就可以在你全局的 CSS 文件中寫一些 !important 的樣式來覆蓋掉那些直接寫在元素上的行內樣式。

CSS 優先級

繼承得到的樣式的優先級是最低的；最近的祖先樣式比其他祖先樣式優先級高；"直接樣式"比"祖先樣式"優先級高。

1、無繼承性的屬性

①? display：規定元素應該生成的框的類型

②? 文本屬性：

vertical-align：垂直文本對齊

text-decoration：規定添加到文本的裝飾

text-shadow：文本陰影效果

white-space：空白符的處理

unicode-bidi：設置文本的方向

③? 盒子模型的屬性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、 border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

④? 背景屬性：background、background-color、background-image、background-repeat、background-position、background-attachment

⑤? 定位屬性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

⑥? 生成內容屬性：content、counter-reset、counter-increment

⑦? 輪廓樣式屬性：outline-style、outline-width、outline-color、outline

⑧? 頁面樣式屬性：size、page-break-before、page-break-after

⑨? 聲音樣式屬性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

2、有繼承性的屬性

①? 字體系列屬性

font：組合字體

font-family：規定元素的字體系列

font-weight：設置字體的粗細

font-size：設置字體的尺寸

font-style：定義字體的風格

font-variant：設置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉換為大寫，但是所有使用小型大寫 字體的字母與其余文本相比，其字體尺寸更小。

font-stretch：對當前的 font-family 進行伸縮變形。所有主流瀏覽器都不支持。

font-size-adjust：為某個元素規定一個 aspect 值，這樣就可以保持首選字體的 x-height。

②?文本系列屬性

text-indent：文本縮進

text-align：文本水平對齊

line-height：行高

word-spacing：增加或減少單詞間的空白（即字間隔）

letter-spacing：增加或減少字符間的空白（字符間距）

text-transform：控制文本大小寫

direction：規定文本的書寫方向

color：文本顏色 a元素除外

③? 元素可見性：visibility

④? 表格布局屬性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

⑤? 列表布局屬性：list-style-type、list-style-image、list-style-position、list-style

⑥? 生成內容屬性：quotes

⑦? 光標屬性：cursor

⑧? 頁面樣式屬性：page、page-break-inside、windows、orphans

⑨? 聲音樣式屬性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、 pitch、pitch-range、stress、richness、、azimuth、elevation

3、所有元素可以繼承的屬性

①? 元素可見性：visibility

②? 光標屬性：cursor

4、內聯元素可以繼承的屬性

①? 字體系列屬性

②? ?除text-indent、text-align之外的文本系列屬性

5、塊級元素可以繼承的屬性

?text-indent、text-align

CSS 7 種基礎的選擇器：

ID 選擇器， 如 #id{}

類選擇器， 如 .class{}

屬性選擇器， 如 a[href="segmentfault.com"]{}

偽類選擇器， 如 :hover{}

偽元素選擇器， 如 ::before{}

標簽選擇器， 如 span{}

通配選擇器， 如 *{}

優先級關系 ：內聯樣式 ID 選擇器 類選擇器 = 屬性選擇器 = 偽類選擇器 標簽選擇器 = 偽元素選擇器

屬性后插有?!important?的屬性擁有最高優先級

:is()和:not()：其偽類在計算選擇器數量時當做普通選擇器進行計數。

css樣式優先級

CSS樣式優先級：

!important（權重1000+）

內聯樣式（權重1000）

id（權重100）

class類（權重10）

元素（權重1）

默認樣式（權重0）

注意：

（1）繼承的權重為0

（2）權重可以相加

div.box 權重為11

div#box 權重為101

（3）相同權重的選擇器，后面的會覆蓋前面的

CSS樣式優先級及穿透

CSS優先級是根據等級的值相加得出選擇器的權重來決定的。

!important 行內樣式 ID 類、偽類、屬性 標簽名 繼承 通配符

計算權重方式：

從圖上看講權重分為：

1.?第一等：代表內聯樣式，如: style=””，權值為1000。

2.?第二等：代表ID選擇器，如：#content，權值為0100。

3.?第三等：代表類，偽類和屬性選擇器，如.content，權值為0010。

4.?第四等：代表類型選擇器和偽元素選擇器，如div p，權值為0001。

5.?通配符、子選擇器、相鄰選擇器等的。如*、、+,權值為0000。

6.?繼承的樣式沒有權值。

當權重一樣時遵循準則：

1. 選擇器越 具體 優先級越 高

2.?在同一個級別的情況下， 最后 指定的規則優先級就越 高 ，也就是我們通常說的就近原則；

權重計算例子：

1. li? - 0 0 0 1 權重為 1

2.?h1?+ *[rel=up] -0 0 1 1 這個相鄰選擇器由標簽選擇器與屬性選擇器組成，屬性選擇器為10，因此權重為11

3.?ul ol li.red - 0 0 1 3 權重為13

4 li.red.level - 0 0 2 1 權重21

1. !important? （width: 100% !important）

2. 行內樣式? ?(style="width:100%")

3. id選擇器? (#myIdName)

4. class選擇器? (.myClassName)

5. 標簽選擇器? (div,h1,p)

1. 使用 " " 符號，這種方式主要是用于普通css，方式為：

外層 第三方組件樣式：?.wrapper .swiper-pagination { color: #eee? }

2.?使用 "/deep/" ,這種方式主要用于sass或less，方式為：

外層 /deep/ 第三方組件樣式：?.wrapper /deep/ .swiper-pagination { color: #eee? }

當前文章：css樣式默認優先級,css設置樣式優先級
URL標題：http://m.newbst.com/article12/phhidc.html

成都網站建設公司_創新互聯，為您提供、營銷型網站建設、企業建站、網站維護、網站導航、網站收錄

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯