摘要:優(yōu)先級(jí)是基于不同種類選擇器組成的匹配規(guī)則。但是,在內(nèi)部聲明的選擇器是會(huì)影響優(yōu)先級(jí)。當(dāng)兩條相互沖突的帶有規(guī)則的聲明被應(yīng)用到相同的元素上時(shí),擁有更大優(yōu)先級(jí)的聲明將會(huì)被采用。擴(kuò)展閱讀前端面試題選擇器
一、選擇器優(yōu)先級(jí)
瀏覽器通過優(yōu)先級(jí)來判斷哪一些屬性值與一個(gè)元素最為相關(guān),從而在該元素上應(yīng)用這些屬性值。優(yōu)先級(jí)是基于不同種類選擇器組成的匹配規(guī)則。二、優(yōu)先級(jí)計(jì)算
優(yōu)先級(jí)就是分配給指定的CSS聲明的一個(gè)權(quán)重,它由匹配的選擇器中的每一種選擇器類型的 數(shù)值 決定。
而當(dāng)優(yōu)先級(jí)與多個(gè)CSS聲明中任意一個(gè)聲明的優(yōu)先級(jí)相等的時(shí)候,CSS中最后的那個(gè)聲明將會(huì)被應(yīng)用到元素上。
當(dāng)同一個(gè)元素有多個(gè)聲明的時(shí)候,優(yōu)先級(jí)才會(huì)有意義。因?yàn)槊恳粋€(gè)直接作用于元素的CSS規(guī)則總是會(huì)接管/覆蓋(take over)該元素從祖先元素繼承而來的規(guī)則。
三、優(yōu)先級(jí)順序 3.1 選擇器權(quán)重值 3.2 從大到小內(nèi)聯(lián)樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 元素(類型)選擇器 = 偽元素選擇器
3.2 注意通配選擇符(universal selector)(*), 關(guān)系選擇符(combinators) (+, >, ~, " ") 和 否定偽類(negation pseudo-class)(:not()) 對(duì)優(yōu)先級(jí)沒有影響。(但是,在 :not() 內(nèi)部聲明的選擇器是會(huì)影響優(yōu)先級(jí))。
四、特殊的 !important 規(guī)則 4.1 說明當(dāng)在一個(gè)樣式聲明中使用一個(gè) !important 規(guī)則時(shí),此聲明將覆蓋任何其他聲明。雖然技術(shù)上 !important 與優(yōu)先級(jí)無關(guān),但 !important 卻又與 CSS 優(yōu)先級(jí)直接相關(guān)。
4.2 破壞級(jí)聯(lián)規(guī)則使用 !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ì)被采用。
擴(kuò)展閱讀 前端面試題-CSS選擇器
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/51992.html
摘要:優(yōu)先級(jí)是基于不同種類選擇器組成的匹配規(guī)則。但是,在內(nèi)部聲明的選擇器是會(huì)影響優(yōu)先級(jí)。當(dāng)兩條相互沖突的帶有規(guī)則的聲明被應(yīng)用到相同的元素上時(shí),擁有更大優(yōu)先級(jí)的聲明將會(huì)被采用。擴(kuò)展閱讀前端面試題選擇器 一、選擇器優(yōu)先級(jí) 瀏覽器通過優(yōu)先級(jí)來判斷哪一些屬性值與一個(gè)元素最為相關(guān),從而在該元素上應(yīng)用這些屬性值。優(yōu)先級(jí)是基于不同種類選擇器組成的匹配規(guī)則。 二、優(yōu)先級(jí)計(jì)算 優(yōu)先級(jí)就是分配給指定的CSS聲明...
摘要:第二等代表選擇器,如,權(quán)值為。第三等代表類,偽類和屬性選擇器,如,權(quán)值為。第五等通配符子選擇器相鄰選擇器等的。第六等繼承的樣式?jīng)]有權(quán)值。 CSS中選擇器優(yōu)先級(jí)的權(quán)重計(jì)算 先看一段代碼,如下: a{ color: red; } #box a{ color: green; } [class=box] a{ c...
摘要:比如說預(yù)處理器,組件化,工程化,兼容性處理等方面,這些主要是基于自己的開發(fā)經(jīng)驗(yàn)業(yè)界流行技術(shù)方案進(jìn)行準(zhǔn)備。但是在開始談面試前我想先提出一個(gè)概念學(xué)霸面試模型學(xué)校的學(xué)習(xí)和公司的工作有很多相似的地方。所以對(duì)于面試,請(qǐng)參考上學(xué)那會(huì)兒你們班學(xué)霸的姿勢(shì)。 背景 參加完 廈門第四屆CSS Conf 后,讓我對(duì) CSS 產(chǎn)生了新的思考。CSS 是前端必須熟練掌握并保持持續(xù)關(guān)注的技術(shù),但是我又不想在 CS...
摘要:不要在編寫規(guī)則時(shí)用標(biāo)簽名或類名不要在編寫規(guī)則時(shí)用標(biāo)簽名把多層標(biāo)簽選擇規(guī)則用規(guī)則替換,減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關(guān)心頁面性能的話,他們真不該被使用擴(kuò)展閱讀前端面試題選擇器前端面試題優(yōu)先級(jí) 一、CSS選擇符 CSS選擇符由一些初始化參數(shù)組成,這些參數(shù)指明了要應(yīng)用這個(gè)CSS規(guī)則的頁面元素。 作為一個(gè)網(wǎng)站的前端開發(fā)工程師,應(yīng)該避免編寫一些常見的開銷很大的CS...
摘要:不要在編寫規(guī)則時(shí)用標(biāo)簽名或類名不要在編寫規(guī)則時(shí)用標(biāo)簽名把多層標(biāo)簽選擇規(guī)則用規(guī)則替換,減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關(guān)心頁面性能的話,他們真不該被使用擴(kuò)展閱讀前端面試題選擇器前端面試題優(yōu)先級(jí) 一、CSS選擇符 CSS選擇符由一些初始化參數(shù)組成,這些參數(shù)指明了要應(yīng)用這個(gè)CSS規(guī)則的頁面元素。 作為一個(gè)網(wǎng)站的前端開發(fā)工程師,應(yīng)該避免編寫一些常見的開銷很大的CS...
閱讀 2446·2021-10-13 09:40
閱讀 3334·2019-08-30 13:46
閱讀 1120·2019-08-29 14:05
閱讀 2953·2019-08-29 12:48
閱讀 3654·2019-08-26 13:28
閱讀 2142·2019-08-26 11:34
閱讀 2277·2019-08-23 18:11
閱讀 1156·2019-08-23 12:26