CSS 優(yōu)先級

本文內(nèi)容根據(jù) CSS Specificity 整理劳景。

首先誉简,根據(jù)優(yōu)先級從高到低,分為以下三類:

A. ID 選擇器(例如盟广,#example
B. 類選擇器 (例如闷串,.example),屬性選擇器(例如筋量,[type="radio"])和偽類(例如烹吵,:hover
C. 類型選擇器(例如,h1)和偽元素(例如桨武,::before

接下來肋拔,我們要想查看一個選擇器中各個優(yōu)先級類別有多少個,使用 A-B-C 這個形式表示呀酸。例如:

  • x-0-0:x 表示 ID 選擇器的數(shù)量凉蜂。
  • 0-x-0:x 表示類、屬性和偽類選擇器的數(shù)量性誉。
  • 0-0-x:x 表示類型和偽元素的數(shù)量窿吩。
  • *, +, >, ~:全局選擇器沒有值,當結(jié)合了其它選擇器時错览,它們不會提升優(yōu)先級纫雁。
  • :not(x):反選偽類選擇器沒有值,但是傳遞的參數(shù)會提升優(yōu)先級倾哺。

示例

  • * - 0-0-0
  • div - 0-0-1
  • li > ul - 0-0-2
  • .myclass - 0-1-0
  • *.myclass - 0-1-0
    * 全局選擇器沒有值
  • *[type:checkbox] - 0-1-0
  • :only-of-type - 0-1-0
  • li.myclass - 0-1-1
  • li[attr] - 0-1-1
  • li:nth-of-type(3n)~li - 0-1-2
  • form input[type=email] - 0-1-2
  • li.class:nth-of-type(3n) - 0-2-1
  • input[type]:not(.class) - 0-2-1
  • #myDiv - 1-0-0
  • #myDiv li.class a[href] - 1-2-2
  • #divitis #myDiv a - 2-0-1
  • style="" - 1-0-0-0
  • !important - 1-0-0-0-0

最后兩個都已經(jīng)不按規(guī)則出牌了轧邪,明顯超出 ID 選擇器的優(yōu)先級了,所以使用它們的時候需要慎重思考羞海。

參考資料

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末忌愚,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子扣猫,更是在濱河造成了極大的恐慌菜循,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異癌幕,居然都是意外死亡衙耕,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進店門勺远,熙熙樓的掌柜王于貴愁眉苦臉地迎上來橙喘,“玉大人,你說我怎么就攤上這事胶逢√梗” “怎么了?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵初坠,是天一觀的道長和簸。 經(jīng)常有香客問我,道長碟刺,這世上最難降的妖魔是什么锁保? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮半沽,結(jié)果婚禮上爽柒,老公的妹妹穿的比我還像新娘。我一直安慰自己者填,他們只是感情好浩村,可當我...
    茶點故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著占哟,像睡著了一般心墅。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上重挑,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天嗓化,我揣著相機與錄音棠涮,去河邊找鬼谬哀。 笑死,一個胖子當著我的面吹牛严肪,可吹牛的內(nèi)容都是我干的史煎。 我是一名探鬼主播,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼驳糯,長吁一口氣:“原來是場噩夢啊……” “哼篇梭!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起酝枢,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤恬偷,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后帘睦,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體袍患,經(jīng)...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡坦康,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了诡延。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片滞欠。...
    茶點故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖肆良,靈堂內(nèi)的尸體忽然破棺而出筛璧,到底是詐尸還是另有隱情,我是刑警寧澤惹恃,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布夭谤,位于F島的核電站,受9級特大地震影響巫糙,放射性物質(zhì)發(fā)生泄漏沮翔。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一曲秉、第九天 我趴在偏房一處隱蔽的房頂上張望采蚀。 院中可真熱鬧,春花似錦承二、人聲如沸榆鼠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽妆够。三九已至,卻和暖如春负蚊,著一層夾襖步出監(jiān)牢的瞬間神妹,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工家妆, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留鸵荠,地道東北人。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓伤极,卻偏偏與公主長得像蛹找,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子哨坪,可洞房花燭夜當晚...
    茶點故事閱讀 44,864評論 2 354

推薦閱讀更多精彩內(nèi)容