1. ！important
成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站制作、網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的金州網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
在屬性后面寫上這條樣式，會覆蓋掉頁面上任何位置定義的元素的樣式。
2. 行內(nèi)樣式，在style屬性里面寫的樣式。
3. id選擇器
4. class選擇器
5. 標(biāo)簽選擇器
6. 通配符選擇器*
7. 瀏覽器的自定義屬性和繼承
css選擇器依照以上順序排列優(yōu)先級
梳理這部分是因為在使用組件模式開發(fā)h5應(yīng)用會出現(xiàn)組件樣式修改未生效的問題，在解決樣式修改的問題前，需要理清楚CSS樣式生效的優(yōu)先級。樣式根據(jù)引入和聲明需要分開介紹，分為 引入樣式優(yōu)先級 和 聲明樣式優(yōu)先級 。
引入樣式優(yōu)先級
引入樣式優(yōu)先級一般是在外部樣式、內(nèi)部樣式、內(nèi)聯(lián)樣式之間應(yīng)用同一個樣式的情況是使用， 優(yōu)先級如下：
外部樣式 | 內(nèi)部樣式 內(nèi)聯(lián)樣式
外部樣式 和 內(nèi)部樣式 ，最后出現(xiàn)的優(yōu)先級最高，例如：
!-- 內(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"/
因此，對于一些重置的樣式集，比如 normalize.css/reset.css 必須寫在所有樣式的前面。
PS: 沒有外聯(lián)樣式， 參考 。
聲明樣式優(yōu)先級
1. 大致的優(yōu)先級
一般來說滿這個規(guī)則：
繼承不如指定
!important 內(nèi)聯(lián) ID Class|屬性|偽類 元素選擇器
:link、:visited、:hover、:active按照LVHA（LoVe HAte）順序定義
上面是優(yōu)先級算法反映出的大致結(jié)果，在一般的開發(fā)中熟記即可。如果需要進(jìn)一步研究原理，則了解下優(yōu)先級算法。
2. 優(yōu)先級算法
選擇器的特殊性值分為四個等級，如下：
等級標(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
特點:
每個等級的初始值為0，
每個等級的疊加為選擇器出 現(xiàn)的次數(shù)相加
不可進(jìn)位，比如0,99,99,99
依次表示為：0,0,0,0
每個等級計數(shù)之間沒關(guān)聯(lián)
等級判斷從左向右，如果某一位數(shù)值相同，則判斷下一位數(shù)值
如果兩個優(yōu)先級相同，則最后出現(xiàn)的優(yōu)先級高，!important也適用
通配符選擇器的特殊性值為：0,0,0,0
繼承樣式優(yōu)先級最低 ，通配符樣式優(yōu)先級高于繼承樣式
計算示例：
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)先級高--ahref=""第三條應(yīng)該是黑色/a!--適用第2、3行規(guī)則，第3行優(yōu)先級高--/divdivid="demo"ahref=""第四條應(yīng)該是紅色/a!--適用第6、7行規(guī)則，第7行優(yōu)先級高--/div
關(guān)于偽類LVHA的解釋
a標(biāo)簽有四種狀態(tài)：鏈接訪問前、鏈接訪問后、鼠標(biāo)滑過、激活，分別對應(yīng)四種偽類:link、:visited、:hover、:active；
當(dāng)鼠標(biāo)滑過a鏈接時，滿足:link和:hover兩個偽類，要改變a標(biāo)簽的顏色，就必須將:hover偽類在:link偽類后面聲明；
當(dāng)鼠標(biāo)點擊激活a鏈接時，同時滿足:link、:hover、:active三種狀態(tài)，要顯示a標(biāo)簽激活時的樣式（:active），必須將:active聲明放到:link和:hover之后。因此得出LVHA這個順序。
這個順序能不能變？可以，但也只有:link和:visited可以交換位置，因為一個鏈接要么訪問過要么沒訪問過，不可能同時滿足，也就不存在覆蓋的問題。
在組件中的應(yīng)用
目前的前端開發(fā)為了增加開發(fā)效率，會對常用組件進(jìn)行封裝，此外，組件還會添加一些必要的結(jié)構(gòu)樣式。但是業(yè)務(wù)的設(shè)計文稿中可不一定按照預(yù)先寫好的默認(rèn)樣式，需要在開發(fā)業(yè)務(wù)時根據(jù)組件的DOM結(jié)構(gòu)修改默認(rèn)樣式，此時會出現(xiàn)樣式不生效的問題。
例如下面的結(jié)構(gòu)，如果對Title直接增加樣式類，則肯定不會生效，因為Title的DOM結(jié)構(gòu)為兩層(組件樣式定義規(guī)定不能使用ID選擇器，且類選擇器滿足最小標(biāo)記原則)），故樣式最多為0,0,2,x。因此，樣式多層標(biāo)記就可提高自定義樣式的優(yōu)先級，例如下方的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組件的樣式標(biāo)記策略推薦使用 金字塔形(樹形) ，比如上面的SCSS書寫，這樣可以保證內(nèi)部自定義樣式不會受到外部干擾，減少不必要的麻煩。
鏈接：
如果你寫的樣式調(diào)用在前，而外部通用樣式在后，那么它就會覆蓋你的（css的意思是“層疊樣式表”，而“層疊”的意思就是后面的會覆蓋前面的）。而內(nèi)聯(lián)樣式（也就是你說的“行內(nèi)樣式”）的優(yōu)先級比外部樣式（通過link標(biāo)簽調(diào)用的）和外聯(lián)樣式（寫在style標(biāo)簽內(nèi)的）都高，所以不會被覆蓋。
當(dāng)創(chuàng)建的樣式表越來越復(fù)雜時，一個標(biāo)簽的樣式將會受到越來越多的影響，這種影響可能來自周圍的標(biāo)簽，也可能來自其自身。下面我們從這兩方面去看看 CSS 樣式的優(yōu)先級。
CSS 的繼承性
CSS 的繼承特性指的是應(yīng)用在一個標(biāo)簽上的那些 CSS 屬性被傳到其子標(biāo)簽上。看下面的 HTML 結(jié)構(gòu)：
div
p/p/div
如果?div?有個屬性?color: red，則這個屬性將被?p?繼承，即?p?也擁有屬性?color: red。
由上可見，當(dāng)網(wǎng)頁比較復(fù)雜， HTML 結(jié)構(gòu)嵌套較深時，一個標(biāo)簽的樣式將深受其祖先標(biāo)簽樣式的影響。影響的規(guī)則是：
CSS 優(yōu)先規(guī)則1：?最近的祖先樣式比其他祖先樣式優(yōu)先級高。
例1：
!-- 類名為 son 的 div 的 color 為 blue --div style="color: red"
div style="color: blue"
div class="son"/div
/div/div
如果我們把一個標(biāo)簽從祖先那里繼承來的而自身沒有的屬性叫做"祖先樣式"，那么"直接樣式"就是一個標(biāo)簽直接擁有的屬性。又有如下規(guī)則：
CSS 優(yōu)先規(guī)則2："直接樣式"比"祖先樣式"優(yōu)先級高。
例2：
!-- 類名為 son 的 div 的 color 為 blue --div style="color: red"
div class="son" style="color: blue"/div/div
選擇器的優(yōu)先級
上面討論了一個標(biāo)簽從祖先繼承來的屬性，現(xiàn)在討論標(biāo)簽自有的屬性。在討論 CSS 優(yōu)先級之前，先說說 CSS 7 種基礎(chǔ)的選擇器：
ID 選擇器， 如 #id{}
類選擇器， 如 .class{}
屬性選擇器， 如 a[href="segmentfault.com"]{}
偽類選擇器， 如 :hover{}
偽元素選擇器， 如 ::before{}
標(biāo)簽選擇器， 如 span{}
通配選擇器， 如 *{}
CSS 優(yōu)先規(guī)則3：優(yōu)先級關(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，因為內(nèi)聯(lián)樣式比其他選擇器的優(yōu)先級高。
所有 CSS 的選擇符由上述 7 種基礎(chǔ)的選擇器或者組合而成，組合的方式有 3 種：
后代選擇符： .father .child{}
子選擇符： .father .child{}
相鄰選擇符: .bro1 + .bro2{}
當(dāng)一個標(biāo)簽同時被多個選擇符選中，我們便需要確定這些選擇符的優(yōu)先級。我們有如下規(guī)則：
CSS 優(yōu)先規(guī)則4：計算選擇符中 ID 選擇器的個數(shù)（a），計算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個數(shù)之和（b），計算選擇符中標(biāo)簽選擇器和偽元素選擇器的個數(shù)之和（c）。按 a、b、c 的順序依次比較大小，大的則優(yōu)先級高，相等則比較下一個。若最后兩個的選擇符中 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;}
由規(guī)則 4 可見，span 的 color 為 red。
如果外部樣式表和內(nèi)部樣式表中的樣式發(fā)生沖突會出現(xiàn)什么情況呢？這與樣式表在 HTML 文件中所處的位置有關(guān)。樣式被應(yīng)用的位置越在下面則優(yōu)先級越高，其實這仍然可以用規(guī)則 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;}
從順序上看，內(nèi)部樣式在最下面，被最晚引用，所以 div 的背景色為 blue。
上面代碼中，@import?語句必須出現(xiàn)在內(nèi)部樣式之前，否則文件引入無效。當(dāng)然不推薦使用?@import?的方式引用外部樣式文件，原因見另一篇博客：CSS 引入方式。
CSS 還提供了一種可以完全忽略以上規(guī)則的方法，當(dāng)你一定、必須確保某一個特定的屬性要顯示時，可以使用這個技術(shù)。
CSS 優(yōu)先規(guī)則5：屬性后插有?!important?的屬性擁有最高優(yōu)先級。若同時插有?!important，則再利用規(guī)則 3、4 判斷優(yōu)先級。
例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。
錯誤的說法
在學(xué)習(xí)過程中，你可能發(fā)現(xiàn)給選擇器加權(quán)值的說法，即 ID 選擇器權(quán)值為 100，類選擇器權(quán)值為 10，標(biāo)簽選擇器權(quán)值為 1，當(dāng)一個選擇器由多個 ID 選擇器、類選擇器或標(biāo)簽選擇器組成時，則將所有權(quán)值相加，然后再比較權(quán)值。這種說法其實是有問題的。比如一個由 11 個類選擇器組成的選擇器和一個由 1 個 ID 選擇器組成的選擇器指向同一個標(biāo)簽，按理說 110 100，應(yīng)該應(yīng)用前者的樣式，然而事實是應(yīng)用后者的樣式。錯誤的原因是：權(quán)重的進(jìn)制是并不是十進(jìn)制，CSS 權(quán)重進(jìn)制在 IE6 為 256，后來擴(kuò)大到了 65536，現(xiàn)代瀏覽器則采用更大的數(shù)量。。還是拿剛剛的例子說明。11 個類選擇器組成的選擇器的總權(quán)值為 110，但因為 11 個均為類選擇器，所以其實總權(quán)值最多不能超過 100， 你可以理解為 99.99，所以最終應(yīng)用后者樣式。
css樣式采取的就近樣式原則。
行內(nèi)樣式div style=""/div優(yōu)先級最高，沒有行內(nèi)樣式那么會回在頁答面找style/style內(nèi)嵌樣式。
名稱CSS中的“層疊（cascading）”表示樣式單規(guī)則應(yīng)用于HTML文檔元素的方式。具體地說，CSS樣式單中的樣式形成一個層次結(jié)構(gòu)，更具體的樣式覆蓋通用樣式。樣式規(guī)則的優(yōu)先級由CSS根據(jù)這個層次結(jié)構(gòu)決定，從而實現(xiàn)級聯(lián)效果。
擴(kuò)展資料：
易于使用和修改：
CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個專門的CSS文件中，以供HTML頁面引用?？傊?，CSS樣式表可以將所有的樣式聲明統(tǒng)一存放，進(jìn)行統(tǒng)一管理。
另外，可以將相同樣式的元素進(jìn)行歸類，使用同一個樣式進(jìn)行定義，也可以將某個樣式應(yīng)用到所有同名的HTML標(biāo)簽中。
參考資料來源：百度百科-CSS
CSS樣式是按照從左往右的順序執(zhí)行的，但一般沒必要太計較，只要把想要的都設(shè)置好了就行了。
重慶分公司
重慶分公司
