第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

了解CSS選擇器的優(yōu)先級(jí)/特殊性

了解CSS選擇器的優(yōu)先級(jí)/特殊性

了解CSS選擇器的優(yōu)先級(jí)/特殊性我想了解一下CSS選擇器處理屬性沖突時(shí),如何選擇屬性而不是另一個(gè)屬性? div {       background-color:red;  }  div.my_class {       background-color:black;  }  div#my_id {       background-color:blue;  }  body div {       background-color:green;  }  body > div {       background-color:orange;  }  body > div#my_id {       background-color:white;  }  <html>       <body>            <div id="my_id" class="my_class">hello</div>       </body>  </html>對(duì)某人來說,這是顯而易見的,但對(duì)我來說卻不是!是否存在一些指南或鏈接,我最終可以理解選擇器優(yōu)先級(jí)是如何工作的?
查看完整描述

3 回答

?
慕的地10843

TA貢獻(xiàn)1785條經(jīng)驗(yàn) 獲得超8個(gè)贊

我將只提供一個(gè)指向CSS2.1規(guī)范本身的鏈接,以及瀏覽器是如何運(yùn)行的。假想為了計(jì)算專一性:

CSS 2.1 6.4.3節(jié):

選擇器的特異性計(jì)算如下:

  • 如果聲明來自‘Style’屬性,而不是帶有選擇器的規(guī)則,則0否則(=a)(在HTML中,元素的“樣式”屬性的值是樣式表規(guī)則)。這些規(guī)則沒有選擇器,因此a=1,b=0,c=0,d=0。
  • 計(jì)數(shù)選擇器中的ID屬性數(shù)(=b)
  • 計(jì)數(shù)選擇器中其他屬性和偽類的數(shù)量(=c)
  • 計(jì)算選擇器中元素名和偽元素的數(shù)量(=d)
  • 其特異性僅以選擇器的形式為基礎(chǔ)。特別是,表單“[id=p33]”的選擇器被計(jì)算為屬性選擇器(a=0,b=0,c=1,d=0),即使id屬性在源文檔的DTD中被定義為“ID”。

比較四個(gè)數(shù)字a-b-c-d(在一個(gè)大基數(shù)的數(shù)字系統(tǒng)中)的特性。

如果特性相等,那么CSS 2.1 6.4.1節(jié)發(fā)揮作用:

  1. 最后,按指定的順序排序:如果兩個(gè)聲明具有相同的權(quán)重、來源和特異性,則后者將獲勝。導(dǎo)入樣式表中的聲明被視為在樣式表本身的任何聲明之前。

請(qǐng)注意,這是在定義樣式時(shí),而不是在使用樣式時(shí)。IF類.a.b具有相同的特異性,以最后定義的為準(zhǔn)。在樣式表中贏了。<p class="a b">...</p><p class="b a">...</p>的定義順序,樣式相同。.a.b.


查看完整回答
反對(duì) 回復(fù) 2019-06-05
?
蝴蝶不菲

TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊

你可以參考這里的完整答案。Mozilla文檔

從最具體的開始:ID選擇器>類型選擇器(普通H1、p標(biāo)記等等)!重要的總是獲勝,但這被認(rèn)為是一個(gè)糟糕的實(shí)踐。參見上面的鏈接。

最好的方法是用它做實(shí)驗(yàn):

  <!-- start class vs id -->
  <p class="class1" id="id1">.class vs #id: The winner is #id</p>

  <!-- upper vs bottom -->
  <p id="id2">the very bottom is the winner</p>

  <!--most specific is the winner -->
  <p id="id3">the most specific</p>

  <!--pseudo and target selector -->
  <h3>pseudo vs type selector</h3>

  <!-- !important is more important! -->
  <h1 id="very-specific">HI! I am very important!</h1>
  </body>

CSS:

#id1{
    color: blue;}.class1{
    color: red;}#id2{
    color: yellow;}#id2{
    color : green;}body p#id3{
    color :orange;}body p{
    color : purple;}body{
    color : black;}h3::first-letter {
    color: #ff0000;}h3{
    color: CornflowerBlue ; }h1{
    color: gray !important;}body h1#very-specific{
    color: red;}

這是一個(gè)測(cè)試用例。


查看完整回答
反對(duì) 回復(fù) 2019-06-05
  • 3 回答
  • 0 關(guān)注
  • 547 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)