真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

body h2 {
  color: green;
}
html h2 {
  color: purple;
}



Here is a title!

    :focus {
        color: red;
    }
    [class] {
        color: blue;
    }
    .classtest {
        color: green;
    }




    什么顏色文字

* #foo {
  color: green;
}
*[id="foo"] {
  color: purple;
}



I am a sample text.

div.outer p {
  color:red;
}
div:not(.outer) p {
  color: blue;
}




  
This is in the outer div.
  
    
This text is in the inner div.
  

該例子中，選擇器p.outer p 和選擇器p:not(.outer) p的優(yōu)先級是相同的，:not被忽略掉了，:not(.outer)中的.outer正常計數(shù)。

如果調(diào)換位置，inner元素會變成紅色

    div:not(.outer) p {
        color: blue;
    }
    div.outer p {
        color:red;
    }

5、優(yōu)先級計算不升位

不要把權(quán)重簡單的作為10進制數(shù)字比較其大小。

a=1的規(guī)則優(yōu)先級將永遠高于其他a=0的。

比如一個選擇器的a>0，b=0即使另外一個選擇器的a=0，b=12，c=12那么前者的權(quán)重依然更大?。?/p>

為證明我做了一個不現(xiàn)實的demo

#test{ /*a=1*/
    color: blue
}
div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest{ /*b=12*/
color:green;
}
















什么顏色文章

可見文本顏色還是藍色?。?/p>

同樣有一個帶有10個id選擇器的規(guī)則，優(yōu)先級也不如內(nèi)聯(lián)樣式。

總之優(yōu)先級的計算不是基于十進制升位的，后面的數(shù)優(yōu)先級再高也不能升到前一位。

6、其他

下面再給出一個經(jīng)典的例子，自己計算一下就明白了。

Examples:

*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

如果確實有棘手的情況，可以在Firebug中查看優(yōu)先級。Firebug中按照優(yōu)先級排序顯示規(guī)則，將優(yōu)先級更高的規(guī)則顯示在最上面，并將被覆蓋的規(guī)則用刪除線劃掉。

三、!import

為什么沒有把!import放在優(yōu)先級順序中，因為官方認為!import和優(yōu)先級沒一點關(guān)系。

不建議使用!import

• Never絕不要在全站使用!import。

• Only只在需要覆蓋全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定頁面中使用   !important

• Never永遠不要在你的插件中使用 !important

• Always要優(yōu)先考慮使用樣式規(guī)則的優(yōu)先級來解決問題而不是 !important

選擇元素時盡量不要多選，不要放寬選擇器的范圍。因為范圍越小，越具有針對性，優(yōu)先級越高。

1、什么場合使用!import?

使用!import的場合也是有的，但是是在沒有別的解決方案的時候。

比如需要覆蓋內(nèi)聯(lián)樣式，因為內(nèi)聯(lián)樣式的優(yōu)先級最高，只能用!import去覆蓋內(nèi)聯(lián)樣式。

還有一種情況

#someElement p {
    color: blue;
}

p.awesome {
    color: red;
}




some text

在外層有 #someElement 的情況下，你怎樣能使 awesome的段落變成紅色呢？這種情況下，如果不使用 !important ，第一條規(guī)則永遠比第二條的優(yōu)先級更高。這也是沒有別的辦法，如果用內(nèi)聯(lián)結(jié)果只會更糟糕。

2、怎樣覆蓋已有!import規(guī)則

a、再加一條!import的css語句，將其應(yīng)用到更高優(yōu)先級的選擇器（在原有基礎(chǔ)上添加額外的標(biāo)簽、類或者ID選擇器）。

幾個更高優(yōu)先級選擇器的例子：

table td    {height: 50px !important;}.myTable td {height: 50px !important;}#myTable td {height: 50px !important;}

b、選擇器一樣，但添加的位置在原有聲明后面。因為相同優(yōu)先級，后邊定義的聲明覆蓋前面的。

相同選擇器的例子：

td {height: 30px !important;}td {height: 50px !important;}

以上是“CSS優(yōu)先級指的是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！