繼承得到的樣式的優(yōu)先級(jí)是最低的；最近的祖先樣式比其他祖先樣式優(yōu)先級(jí)高；"直接樣式"比"祖先樣式"優(yōu)先級(jí)高。
創(chuàng)新互聯(lián)，為您提供重慶網(wǎng)站建設(shè)、網(wǎng)站制作公司、網(wǎng)站營(yíng)銷推廣、網(wǎng)站開(kāi)發(fā)設(shè)計(jì)，對(duì)服務(wù)工商代辦等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗(yàn)。創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報(bào)價(jià)服務(wù),我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈，認(rèn)真對(duì)待每位客戶，為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進(jìn)步，是我們永遠(yuǎn)的責(zé)任！
1、無(wú)繼承性的屬性
①? display：規(guī)定元素應(yīng)該生成的框的類型
②? 文本屬性：
vertical-align：垂直文本對(duì)齊
text-decoration：規(guī)定添加到文本的裝飾
text-shadow：文本陰影效果
white-space：空白符的處理
unicode-bidi：設(shè)置文本的方向
③? 盒子模型的屬性：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
⑥? 生成內(nèi)容屬性：content、counter-reset、counter-increment
⑦? 輪廓樣式屬性：outline-style、outline-width、outline-color、outline
⑧? 頁(yè)面樣式屬性：size、page-break-before、page-break-after
⑨? 聲音樣式屬性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
2、有繼承性的屬性
①? 字體系列屬性
font：組合字體
font-family：規(guī)定元素的字體系列
font-weight：設(shè)置字體的粗細(xì)
font-size：設(shè)置字體的尺寸
font-style：定義字體的風(fēng)格
font-variant：設(shè)置小型大寫(xiě)字母的字體顯示文本，這意味著所有的小寫(xiě)字母均會(huì)被轉(zhuǎn)換為大寫(xiě)，但是所有使用小型大寫(xiě) 字體的字母與其余文本相比，其字體尺寸更小。
font-stretch：對(duì)當(dāng)前的 font-family 進(jìn)行伸縮變形。所有主流瀏覽器都不支持。
font-size-adjust：為某個(gè)元素規(guī)定一個(gè) aspect 值，這樣就可以保持首選字體的 x-height。
②?文本系列屬性
text-indent：文本縮進(jìn)
text-align：文本水平對(duì)齊
line-height：行高
word-spacing：增加或減少單詞間的空白（即字間隔）
letter-spacing：增加或減少字符間的空白（字符間距）
text-transform：控制文本大小寫(xiě)
direction：規(guī)定文本的書(shū)寫(xiě)方向
color：文本顏色 a元素除外
③? 元素可見(jiàn)性：visibility
④? 表格布局屬性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
⑤? 列表布局屬性：list-style-type、list-style-image、list-style-position、list-style
⑥? 生成內(nèi)容屬性：quotes
⑦? 光標(biāo)屬性：cursor
⑧? 頁(yè)面樣式屬性：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、所有元素可以繼承的屬性
①? 元素可見(jiàn)性：visibility
②? 光標(biāo)屬性：cursor
4、內(nèi)聯(lián)元素可以繼承的屬性
①? 字體系列屬性
②? ?除text-indent、text-align之外的文本系列屬性
5、塊級(jí)元素可以繼承的屬性
?text-indent、text-align
CSS 7 種基礎(chǔ)的選擇器：
ID 選擇器， 如 #id{}
類選擇器， 如 .class{}
屬性選擇器， 如 a[href="segmentfault.com"]{}
偽類選擇器， 如 :hover{}
偽元素選擇器， 如 ::before{}
標(biāo)簽選擇器， 如 span{}
通配選擇器， 如 *{}
優(yōu)先級(jí)關(guān)系 ：內(nèi)聯(lián)樣式 ID 選擇器 類選擇器 = 屬性選擇器 = 偽類選擇器 標(biāo)簽選擇器 = 偽元素選擇器
屬性后插有?!important?的屬性擁有最高優(yōu)先級(jí)
:is()和:not()：其偽類在計(jì)算選擇器數(shù)量時(shí)當(dāng)做普通選擇器進(jìn)行計(jì)數(shù)。
當(dāng)在一個(gè)樣式聲明中使用一個(gè) !important 規(guī)則時(shí)，此聲明將覆蓋任何其他聲明。雖然，從技術(shù)上講， !important 與優(yōu)先級(jí)無(wú)關(guān)，但它與最終的結(jié)果直接相關(guān)。使用 !important 是一個(gè) 壞習(xí)慣 ，應(yīng)該盡量避免，因?yàn)檫@破壞了樣式表中的固有的級(jí)聯(lián)規(guī)則 使得調(diào)試找bug變得更加困難了。當(dāng)兩條相互沖突的帶有 !important 規(guī)則的聲明被應(yīng)用到相同的元素上時(shí)，擁有更大優(yōu)先級(jí)的聲明將會(huì)被采用。
一些經(jīng)驗(yàn)法則：
什么的情況下可以使用 !important：
A) 覆蓋內(nèi)聯(lián)樣式
你的網(wǎng)站上有一個(gè)設(shè)定了全站樣式的 CSS 文件，同時(shí)你（或是你同事）寫(xiě)了一些很差的內(nèi)聯(lián)樣式。
全局的CSS文件會(huì)在全局范圍內(nèi)設(shè)置網(wǎng)站的外觀，而直接在各個(gè)元素上定義的內(nèi)聯(lián)樣式可能會(huì)覆蓋您的全局CSS文件。 內(nèi)聯(lián)樣式和!important都被認(rèn)為是非常不好的做法，但是有時(shí)你可以在CSS文件里用!important去覆蓋內(nèi)聯(lián)樣式。
在這種情況下，你就可以在你全局的 CSS 文件中寫(xiě)一些 !important 的樣式來(lái)覆蓋掉那些直接寫(xiě)在元素上的行內(nèi)樣式。
梳理這部分是因?yàn)樵谑褂媒M件模式開(kāi)發(fā)h5應(yīng)用會(huì)出現(xiàn)組件樣式修改未生效的問(wèn)題，在解決樣式修改的問(wèn)題前，需要理清楚CSS樣式生效的優(yōu)先級(jí)。樣式根據(jù)引入和聲明需要分開(kāi)介紹，分為 引入樣式優(yōu)先級(jí) 和 聲明樣式優(yōu)先級(jí) 。
引入樣式優(yōu)先級(jí)
引入樣式優(yōu)先級(jí)一般是在外部樣式、內(nèi)部樣式、內(nèi)聯(lián)樣式之間應(yīng)用同一個(gè)樣式的情況是使用， 優(yōu)先級(jí)如下：
外部樣式 | 內(nèi)部樣式 內(nèi)聯(lián)樣式
外部樣式 和 內(nèi)部樣式 ，最后出現(xiàn)的優(yōu)先級(jí)最高，例如：
!-- 內(nèi)聯(lián)樣式 --spanstyle="color:red;"Hello/spanstyletype="text/css"/* 內(nèi)部樣式 */h3{color:green;}/style!-- 外部樣式 style.css --linkrel="stylesheet"type="text/css"href="style.css"/
因此，對(duì)于一些重置的樣式集，比如 normalize.css/reset.css 必須寫(xiě)在所有樣式的前面。
PS: 沒(méi)有外聯(lián)樣式， 參考 。
聲明樣式優(yōu)先級(jí)
1. 大致的優(yōu)先級(jí)
一般來(lái)說(shuō)滿這個(gè)規(guī)則：
繼承不如指定
!important 內(nèi)聯(lián) ID Class|屬性|偽類 元素選擇器
:link、:visited、:hover、:active按照LVHA（LoVe HAte）順序定義
上面是優(yōu)先級(jí)算法反映出的大致結(jié)果，在一般的開(kāi)發(fā)中熟記即可。如果需要進(jìn)一步研究原理，則了解下優(yōu)先級(jí)算法。
2. 優(yōu)先級(jí)算法
選擇器的特殊性值分為四個(gè)等級(jí)，如下：
等級(jí)標(biāo)簽內(nèi)選擇符ID選擇符Class選擇符/屬性選擇符/偽類選擇符元素選擇符
示例span style="color:red;"#text{color:red;}.text{color:red;} [type="text"]{color:red}span{color:red;}
標(biāo)記位x,0,0,00,x,0,00,0,x,00,0,0,x
特點(diǎn):
每個(gè)等級(jí)的初始值為0，
每個(gè)等級(jí)的疊加為選擇器出 現(xiàn)的次數(shù)相加
不可進(jìn)位，比如0,99,99,99
依次表示為：0,0,0,0
每個(gè)等級(jí)計(jì)數(shù)之間沒(méi)關(guān)聯(lián)
等級(jí)判斷從左向右，如果某一位數(shù)值相同，則判斷下一位數(shù)值
如果兩個(gè)優(yōu)先級(jí)相同，則最后出現(xiàn)的優(yōu)先級(jí)高，!important也適用
通配符選擇器的特殊性值為：0,0,0,0
繼承樣式優(yōu)先級(jí)最低 ，通配符樣式優(yōu)先級(jí)高于繼承樣式
計(jì)算示例：
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=""第一條應(yīng)該是黃色/a!--適用第1行規(guī)則--divclass="demo"inputtype="text"value="第二條應(yīng)該是藍(lán)色"/!--適用第4、5行規(guī)則，第4行優(yōu)先級(jí)高--ahref=""第三條應(yīng)該是黑色/a!--適用第2、3行規(guī)則，第3行優(yōu)先級(jí)高--/divdivid="demo"ahref=""第四條應(yīng)該是紅色/a!--適用第6、7行規(guī)則，第7行優(yōu)先級(jí)高--/div
關(guān)于偽類LVHA的解釋
a標(biāo)簽有四種狀態(tài)：鏈接訪問(wèn)前、鏈接訪問(wèn)后、鼠標(biāo)滑過(guò)、激活，分別對(duì)應(yīng)四種偽類:link、:visited、:hover、:active；
當(dāng)鼠標(biāo)滑過(guò)a鏈接時(shí)，滿足:link和:hover兩個(gè)偽類，要改變a標(biāo)簽的顏色，就必須將:hover偽類在:link偽類后面聲明；
當(dāng)鼠標(biāo)點(diǎn)擊激活a鏈接時(shí)，同時(shí)滿足:link、:hover、:active三種狀態(tài)，要顯示a標(biāo)簽激活時(shí)的樣式（:active），必須將:active聲明放到:link和:hover之后。因此得出LVHA這個(gè)順序。
這個(gè)順序能不能變？可以，但也只有:link和:visited可以交換位置，因?yàn)橐粋€(gè)鏈接要么訪問(wèn)過(guò)要么沒(méi)訪問(wèn)過(guò)，不可能同時(shí)滿足，也就不存在覆蓋的問(wèn)題。
在組件中的應(yīng)用
目前的前端開(kāi)發(fā)為了增加開(kāi)發(fā)效率，會(huì)對(duì)常用組件進(jìn)行封裝，此外，組件還會(huì)添加一些必要的結(jié)構(gòu)樣式。但是業(yè)務(wù)的設(shè)計(jì)文稿中可不一定按照預(yù)先寫(xiě)好的默認(rèn)樣式，需要在開(kāi)發(fā)業(yè)務(wù)時(shí)根據(jù)組件的DOM結(jié)構(gòu)修改默認(rèn)樣式，此時(shí)會(huì)出現(xiàn)樣式不生效的問(wèn)題。
例如下面的結(jié)構(gòu)，如果對(duì)Title直接增加樣式類，則肯定不會(huì)生效，因?yàn)門itle的DOM結(jié)構(gòu)為兩層(組件樣式定義規(guī)定不能使用ID選擇器，且類選擇器滿足最小標(biāo)記原則)），故樣式最多為0,0,2,x。因此，樣式多層標(biāo)記就可提高自定義樣式的優(yōu)先級(jí)，例如下方的SCSS寫(xiě)法。
Pageclass="test"Headerclass="test__header"NavbarTitleclass="test__header--title"Toolbar/Title/Navbar/HeaderContent/Content/Page
.test{.test__header{.test__header--title{height:100px;}}}
此外，對(duì)于Page組件的樣式標(biāo)記策略推薦使用 金字塔形(樹(shù)形) ，比如上面的SCSS書(shū)寫(xiě)，這樣可以保證內(nèi)部自定義樣式不會(huì)受到外部干擾，減少不必要的麻煩。
鏈接：
當(dāng)創(chuàng)建的樣式表越來(lái)越復(fù)雜時(shí)，一個(gè)標(biāo)簽的樣式將會(huì)受到越來(lái)越多的影響，這種影響可能來(lái)自周圍的標(biāo)簽，也可能來(lái)自其自身。下面我們從這兩方面去看看 CSS 樣式的優(yōu)先級(jí)。
CSS 的繼承性
CSS 的繼承特性指的是應(yīng)用在一個(gè)標(biāo)簽上的那些 CSS 屬性被傳到其子標(biāo)簽上。看下面的 HTML 結(jié)構(gòu)：
div
p/p/div
如果?div?有個(gè)屬性?color: red，則這個(gè)屬性將被?p?繼承，即?p?也擁有屬性?color: red。
由上可見(jiàn)，當(dāng)網(wǎng)頁(yè)比較復(fù)雜， HTML 結(jié)構(gòu)嵌套較深時(shí)，一個(gè)標(biāo)簽的樣式將深受其祖先標(biāo)簽樣式的影響。影響的規(guī)則是：
CSS 優(yōu)先規(guī)則1：?最近的祖先樣式比其他祖先樣式優(yōu)先級(jí)高。
例1：
!-- 類名為 son 的 div 的 color 為 blue --div style="color: red"
div style="color: blue"
div class="son"/div
/div/div
如果我們把一個(gè)標(biāo)簽從祖先那里繼承來(lái)的而自身沒(méi)有的屬性叫做"祖先樣式"，那么"直接樣式"就是一個(gè)標(biāo)簽直接擁有的屬性。又有如下規(guī)則：
CSS 優(yōu)先規(guī)則2："直接樣式"比"祖先樣式"優(yōu)先級(jí)高。
例2：
!-- 類名為 son 的 div 的 color 為 blue --div style="color: red"
div class="son" style="color: blue"/div/div
選擇器的優(yōu)先級(jí)
上面討論了一個(gè)標(biāo)簽從祖先繼承來(lái)的屬性，現(xiàn)在討論標(biāo)簽自有的屬性。在討論 CSS 優(yōu)先級(jí)之前，先說(shuō)說(shuō) CSS 7 種基礎(chǔ)的選擇器：
ID 選擇器， 如 #id{}
類選擇器， 如 .class{}
屬性選擇器， 如 a[href="segmentfault.com"]{}
偽類選擇器， 如 :hover{}
偽元素選擇器， 如 ::before{}
標(biāo)簽選擇器， 如 span{}
通配選擇器， 如 *{}
CSS 優(yōu)先規(guī)則3：優(yōu)先級(jí)關(guān)系：內(nèi)聯(lián)樣式 ID 選擇器 類選擇器 = 屬性選擇器 = 偽類選擇器 標(biāo)簽選擇器 = 偽元素選擇器
例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，因?yàn)閮?nèi)聯(lián)樣式比其他選擇器的優(yōu)先級(jí)高。
所有 CSS 的選擇符由上述 7 種基礎(chǔ)的選擇器或者組合而成，組合的方式有 3 種：
后代選擇符： .father .child{}
子選擇符： .father .child{}
相鄰選擇符: .bro1 + .bro2{}
當(dāng)一個(gè)標(biāo)簽同時(shí)被多個(gè)選擇符選中，我們便需要確定這些選擇符的優(yōu)先級(jí)。我們有如下規(guī)則：
CSS 優(yōu)先規(guī)則4：計(jì)算選擇符中 ID 選擇器的個(gè)數(shù)（a），計(jì)算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個(gè)數(shù)之和（b），計(jì)算選擇符中標(biāo)簽選擇器和偽元素選擇器的個(gè)數(shù)之和（c）。按 a、b、c 的順序依次比較大小，大的則優(yōu)先級(jí)高，相等則比較下一個(gè)。若最后兩個(gè)的選擇符中 a、b、c 都相等，則按照"就近原則"來(lái)判斷。
例4：
// HTMLdiv id="con-id"
span class="con-span"/span/div// CSS#con-id span {
color: red;}div .con-span {
color: blue;}
由規(guī)則 4 可見(jiàn)，span 的 color 為 red。
如果外部樣式表和內(nèi)部樣式表中的樣式發(fā)生沖突會(huì)出現(xiàn)什么情況呢？這與樣式表在 HTML 文件中所處的位置有關(guān)。樣式被應(yīng)用的位置越在下面則優(yōu)先級(jí)越高，其實(shí)這仍然可以用規(guī)則 4 來(lái)解釋。
例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;}
從順序上看，內(nèi)部樣式在最下面，被最晚引用，所以 div 的背景色為 blue。
上面代碼中，@import?語(yǔ)句必須出現(xiàn)在內(nèi)部樣式之前，否則文件引入無(wú)效。當(dāng)然不推薦使用?@import?的方式引用外部樣式文件，原因見(jiàn)另一篇博客：CSS 引入方式。
CSS 還提供了一種可以完全忽略以上規(guī)則的方法，當(dāng)你一定、必須確保某一個(gè)特定的屬性要顯示時(shí)，可以使用這個(gè)技術(shù)。
CSS 優(yōu)先規(guī)則5：屬性后插有?!important?的屬性擁有最高優(yōu)先級(jí)。若同時(shí)插有?!important，則再利用規(guī)則 3、4 判斷優(yōu)先級(jí)。
例6：
// HTMLdiv class="father"
p class="son"/p/div// CSSp {
background: red !important;}.father .son {
background: blue;}
雖然 .father .son 擁有更高的權(quán)值，但選擇器 p 中的 background 屬性被插入了 !important， 所以 p 的 background 為 red。
錯(cuò)誤的說(shuō)法
在學(xué)習(xí)過(guò)程中，你可能發(fā)現(xiàn)給選擇器加權(quán)值的說(shuō)法，即 ID 選擇器權(quán)值為 100，類選擇器權(quán)值為 10，標(biāo)簽選擇器權(quán)值為 1，當(dāng)一個(gè)選擇器由多個(gè) ID 選擇器、類選擇器或標(biāo)簽選擇器組成時(shí)，則將所有權(quán)值相加，然后再比較權(quán)值。這種說(shuō)法其實(shí)是有問(wèn)題的。比如一個(gè)由 11 個(gè)類選擇器組成的選擇器和一個(gè)由 1 個(gè) ID 選擇器組成的選擇器指向同一個(gè)標(biāo)簽，按理說(shuō) 110 100，應(yīng)該應(yīng)用前者的樣式，然而事實(shí)是應(yīng)用后者的樣式。錯(cuò)誤的原因是：權(quán)重的進(jìn)制是并不是十進(jìn)制，CSS 權(quán)重進(jìn)制在 IE6 為 256，后來(lái)擴(kuò)大到了 65536，現(xiàn)代瀏覽器則采用更大的數(shù)量。。還是拿剛剛的例子說(shuō)明。11 個(gè)類選擇器組成的選擇器的總權(quán)值為 110，但因?yàn)?11 個(gè)均為類選擇器，所以其實(shí)總權(quán)值最多不能超過(guò) 100， 你可以理解為 99.99，所以最終應(yīng)用后者樣式。
在看css選擇器優(yōu)先級(jí)順序前，我們先來(lái)簡(jiǎn)單說(shuō)說(shuō)css基本選擇器有哪些?
1.標(biāo)記選擇器(如：body,div,p,ul,li)
2.id選擇器(如：id=“name”,id=“name_txt”)
3.類選擇器(如：id=“name”,id=“name_txt”)
4.后代選擇器(如：#head .nav ul li 從父集到子孫集的選擇器)
5.子元素選擇器(如：divp ,帶大于號(hào))
6.偽類選擇器(如：就是鏈接樣式,a元素的偽類，4種不同的狀態(tài)：link、visited、active、hover。)
看完了基本的css選擇器類型后，我們接著來(lái)看一下css優(yōu)先級(jí)的概念。
當(dāng)兩個(gè)規(guī)則都作用到了同一個(gè)html元素上時(shí)，如果定義的屬性有沖突，那么應(yīng)該用誰(shuí)的值的，用到誰(shuí)的值誰(shuí)的優(yōu)先級(jí)就高。
我們來(lái)看一下css選擇器優(yōu)先級(jí)的算法：
每個(gè)規(guī)則對(duì)應(yīng)一個(gè)初始"四位數(shù)"：0、0、0、0
若是 行內(nèi)選擇符，則加1、0、0、0
若是 ID選擇符，則加0、1、0、0
若是 類選擇符/偽類選擇符，則分別加0、0、1、0
若是 元素選擇符，則分別加0、0、0、1
算法：將每條規(guī)則中，選擇符對(duì)應(yīng)的數(shù)相加后得到的”四位數(shù)“，從左到右進(jìn)行比較，大的優(yōu)先級(jí)越高。
看完了上述內(nèi)容，那我們就來(lái)看看css選擇器優(yōu)先級(jí)的具體排序。
css選擇器優(yōu)先級(jí)最高到最低順序?yàn)椋?/p>
1.id選擇器(#myid)
2.類選擇器(.myclassname)
3.標(biāo)簽選擇器(div,h1,p)
4.子選擇器(ul li)
5.后代選擇器(li a)
6.偽類選擇(a:hover,li:nth-child)
最后，需要注意的是：
!important的優(yōu)先級(jí)是最高的，但出現(xiàn)沖突時(shí)則需比較”四位數(shù)“;
優(yōu)先級(jí)相同時(shí)，則采用就近原則，選擇最后出現(xiàn)的樣式;
繼承得來(lái)的屬性，其優(yōu)先級(jí)最低。
重慶分公司
重慶分公司
