梳理這部分是因?yàn)樵谑褂媒M件模式開發(fā)h5應(yīng)用會(huì)出現(xiàn)組件樣式修改未生效的問題，在解決樣式修改的問題前，需要理清楚CSS樣式生效的優(yōu)先級(jí)。樣式根據(jù)引入和聲明需要分開介紹，分為引入樣式優(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</span><styletype="text/css">/* 內(nèi)部樣式 */h3{color:green;}</style><!-- 外部樣式 style.css --><linkrel="stylesheet"type="text/css"href="style.css"/>
因此，對(duì)于一些重置的樣式集，比如normalize.css/reset.css必須寫在所有樣式的前面。
PS: 沒有外聯(lián)樣式，參考。
聲明樣式優(yōu)先級(jí)
1. 大致的優(yōu)先級(jí)
一般來說滿這個(gè)規(guī)則：
繼承不如指定
!important > 內(nèi)聯(lián) > ID > Class|屬性|偽類 > 元素選擇器
:link、:visited、:hover、:active按照LVHA（LoVe HAte）順序定義
上面是優(yōu)先級(jí)算法反映出的大致結(jié)果，在一般的開發(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ù)之間沒關(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í)高--></div><divid="demo"><ahref="">第四條應(yīng)該是紅色</a><!--適用第6、7行規(guī)則，第7行優(yōu)先級(jí)高--></div>
關(guān)于偽類LVHA的解釋
a標(biāo)簽有四種狀態(tài)：鏈接訪問前、鏈接訪問后、鼠標(biāo)滑過、激活，分別對(duì)應(yīng)四種偽類:link、:visited、:hover、:active；
當(dāng)鼠標(biāo)滑過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è)鏈接要么訪問過要么沒訪問過，不可能同時(shí)滿足，也就不存在覆蓋的問題。
在組件中的應(yīng)用
目前的前端開發(fā)為了增加開發(fā)效率，會(huì)對(duì)常用組件進(jìn)行封裝，此外，組件還會(huì)添加一些必要的結(jié)構(gòu)樣式。但是業(yè)務(wù)的設(shè)計(jì)文稿中可不一定按照預(yù)先寫好的默認(rèn)樣式，需要在開發(fā)業(yè)務(wù)時(shí)根據(jù)組件的DOM結(jié)構(gòu)修改默認(rèn)樣式，此時(shí)會(huì)出現(xià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寫法。
<Pageclass="test"><Headerclass="test__header"><Navbar><Titleclass="test__header--title">Toolbar</Title></Navbar></Header><Content></Content></Page>
.test{.test__header{.test__header--title{height:100px;}}}
此外，對(duì)于Page組件的樣式標(biāo)記策略推薦使用金字塔形(樹形)，比如上面的SCSS書寫，這樣可以保證內(nèi)部自定義樣式不會(huì)受到外部干擾，減少不必要的麻煩。
作者：烈風(fēng)裘
鏈接：http://www.itdecent.cn/p/1c4e639ff7d5
來源：簡(jiǎn)書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
