css的優先級順序是怎樣的

當創建的樣式表越來越復雜時，一個標簽的樣式將會受到越來越多的影響，這種影響可能來自周圍的標簽，也可能來自其自身。下面我們從這兩方面去看看 CSS 樣式的優先級。

成都創新互聯公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都做網站、網站設計、企業官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯網時代的四平網站設計、移動媒體設計的需求，幫助企業找到有效的互聯網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

CSS 的繼承性

CSS 的繼承特性指的是應用在一個標簽上的那些 CSS 屬性被傳到其子標簽上。看下面的 HTML 結構：

div

p/p/div

如果?div?有個屬性?color: red，則這個屬性將被?p?繼承，即?p?也擁有屬性?color: red。

由上可見，當網頁比較復雜， HTML 結構嵌套較深時，一個標簽的樣式將深受其祖先標簽樣式的影響。影響的規則是：

CSS 優先規則1：?最近的祖先樣式比其他祖先樣式優先級高。

例1：

!-- 類名為 son 的 div 的 color 為 blue --div style="color: red"

div style="color: blue"

div class="son"/div

/div/div

如果我們把一個標簽從祖先那里繼承來的而自身沒有的屬性叫做"祖先樣式"，那么"直接樣式"就是一個標簽直接擁有的屬性。又有如下規則：

CSS 優先規則2："直接樣式"比"祖先樣式"優先級高。

例2：

!-- 類名為 son 的 div 的 color 為 blue --div style="color: red"

div class="son" style="color: blue"/div/div

選擇器的優先級

上面討論了一個標簽從祖先繼承來的屬性，現在討論標簽自有的屬性。在討論 CSS 優先級之前，先說說 CSS 7 種基礎的選擇器：

ID 選擇器， 如 #id{}

類選擇器， 如 .class{}

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

偽類選擇器， 如 :hover{}

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

標簽選擇器， 如 span{}

通配選擇器， 如 *{}

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

例3：

// HTMLdiv class="content-class" id="content-id" style="color: black"/div// CSS#content-id {

color: red;}.content-class {

color: blue;}div {

color: grey;}

最終的 color 為 black，因為內聯樣式比其他選擇器的優先級高。

所有 CSS 的選擇符由上述 7 種基礎的選擇器或者組合而成，組合的方式有 3 種：

后代選擇符： .father .child{}

子選擇符： .father .child{}

相鄰選擇符: .bro1 + .bro2{}

當一個標簽同時被多個選擇符選中，我們便需要確定這些選擇符的優先級。我們有如下規則：

CSS 優先規則4：計算選擇符中 ID 選擇器的個數（a），計算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個數之和（b），計算選擇符中標簽選擇器和偽元素選擇器的個數之和（c）。按 a、b、c 的順序依次比較大小，大的則優先級高，相等則比較下一個。若最后兩個的選擇符中 a、b、c 都相等，則按照"就近原則"來判斷。

例4：

// HTMLdiv id="con-id"

span class="con-span"/span/div// CSS#con-id span {

color: red;}div .con-span {

color: blue;}

由規則 4 可見，span 的 color 為 red。

如果外部樣式表和內部樣式表中的樣式發生沖突會出現什么情況呢？這與樣式表在 HTML 文件中所處的位置有關。樣式被應用的位置越在下面則優先級越高，其實這仍然可以用規則 4 來解釋。

例5：

// HTMLlink rel="stylesheet" type="text/css" href="style-link.css"style type="text/css"@import url(style-import.css); div {

background: blue;}/stylediv/div// style-link.cssdiv {

background: lime;}// style-import.cssdiv {

background: grey;}

從順序上看，內部樣式在最下面，被最晚引用，所以 div 的背景色為 blue。

上面代碼中，@import?語句必須出現在內部樣式之前，否則文件引入無效。當然不推薦使用?@import?的方式引用外部樣式文件，原因見另一篇博客：CSS 引入方式。

CSS 還提供了一種可以完全忽略以上規則的方法，當你一定、必須確保某一個特定的屬性要顯示時，可以使用這個技術。

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

例6：

// HTMLdiv class="father"

p class="son"/p/div// CSSp {

background: red !important;}.father .son {

background: blue;}

雖然 .father .son 擁有更高的權值，但選擇器 p 中的 background 屬性被插入了 !important， 所以 p 的 background 為 red。

錯誤的說法

在學習過程中，你可能發現給選擇器加權值的說法，即 ID 選擇器權值為 100，類選擇器權值為 10，標簽選擇器權值為 1，當一個選擇器由多個 ID 選擇器、類選擇器或標簽選擇器組成時，則將所有權值相加，然后再比較權值。這種說法其實是有問題的。比如一個由 11 個類選擇器組成的選擇器和一個由 1 個 ID 選擇器組成的選擇器指向同一個標簽，按理說 110 100，應該應用前者的樣式，然而事實是應用后者的樣式。錯誤的原因是：權重的進制是并不是十進制，CSS 權重進制在 IE6 為 256，后來擴大到了 65536，現代瀏覽器則采用更大的數量。。還是拿剛剛的例子說明。11 個類選擇器組成的選擇器的總權值為 110，但因為 11 個均為類選擇器，所以其實總權值最多不能超過 100， 你可以理解為 99.99，所以最終應用后者樣式。

css規定選擇器優先級順序

1. ！important

在屬性后面寫上這條樣式，會覆蓋掉頁面上任何位置定義的元素的樣式。

2. 行內樣式，在style屬性里面寫的樣式。

3. id選擇器

4. class選擇器

5. 標簽選擇器

　 6. 通配符選擇器*

7. 瀏覽器的自定義屬性和繼承

css選擇器依照以上順序排列優先級

Css中樣式的優先級

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

一些經驗法則：

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

A) 覆蓋內聯樣式

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

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

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

css優先級計算規則

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

引入樣式優先級

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

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

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

!-- 內聯樣式 --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書寫，這樣可以保證內部自定義樣式不會受到外部干擾，減少不必要的麻煩。

鏈接：

css中的font的復合樣式的順序是怎樣的？

可設置的屬性（按順序）： "font-style font-variant font-weight font-size/line-height font-family"

font 簡寫屬性在一個聲明中設置所有字體屬性。

font-size和font-family的值是必需的。如果缺少了其他值，默認值將被插入，如果有默認值的話。

注意： line - height屬性設置行與行之間的空間。

例子：

p.ex1{

font:15px arial,sans-serif;

}

p.ex2{

font:italic bold 12px/30px Georgia,serif;

}

擴展資料：

1、font-style：指定文本的字體樣式。

屬性值：

normal：默認值。瀏覽器顯示一個標準的字體樣式。 ?

italic：瀏覽器會顯示一個斜體的字體樣式。 ?

oblique：瀏覽器會顯示一個傾斜的字體樣式。 ?

inherit：規定應該從父元素繼承字體樣式。

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

font-variant 屬性主要用于定義小型大寫字母文本。

屬性值：

normal：默認值。瀏覽器會顯示一個標準的字體。 ?

small-caps：瀏覽器會顯示小型大寫字母的字體。 ?

inherit：規定應該從父元素繼承 font-variant 屬性的值。 ?

3、font-weight：屬性設置文本的粗細。

屬性值：

normal：默認值。定義標準的字符。 ?

bold：定義粗體字符。 ?

bolder：定義更粗的字符。 ?

lighter：定義更細的字符。 ?

100-900的整百數：定義由粗到細的字符。400 等同于 normal，而 700 等同于 bold。 ?

inherit：規定應該從父元素繼承字體的粗細。

4、font-size：屬性用于設置字體大小。 ?

5、font - family：屬性指定一個元素的字體。

網頁題目：css復合樣式優先順序,css復合樣式優先順序為
瀏覽地址：http://vcdvsql.cn/article22/dsdeijc.html

成都網站建設公司_創新互聯，為您提供企業建站、靜態網站、微信小程序、網站排名、網頁設計公司、電子商務

廣告

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