欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

瀏覽器對于CSS不同類中的同屬性不同值優(yōu)先級問題

  發(fā)布時間：2014-05-12 11:18:50   作者：佚名   我要評論
發(fā)現了在一個標簽中的不同兩個類給同一屬性設定了不同值的時候，最終屬性取值的特點，下面用示例說明一下

自己做點小程序的時候發(fā)現在一個標簽中的不同兩個類給同一屬性設定了不同值的時候，最終屬性取值的特點：

上面這句話有夠拗口的，用例子說明一切吧。

csstest.html:

復制代碼
代碼如下:

<!DOCTYPE HTML>
<html>
<head>
<title>CSStest</title>
<link rel="stylesheet" href="1.css" />
<link rel="stylesheet" href="2.css" />
</head>
<body>
<!-- 類 a b c d 在1.css中，類 e 在2.css中 -->
<p class="a b">aaaaaaa</p>
<p class="b a">bbbbbbb</p>
<p class="c e">ccccccc</p>
<p class="e c">ddddddd</p>
<p class="d e">eeeeeee</p>
<p class="e d">fffffff</p>
</body>
</html>

1.css

復制代碼
代碼如下:

.a{
cursor: pointer;
font-size: 1em;
}
.b{
cursor: move;
font-size: 2em;
}
.c{
cursor: crosshair;
font-size: 3em;
}
.d{
cursor: help;
font-size: 4em !important;
}

2.css

復制代碼
代碼如下:

.e{
cursor: progress;
font-size: 5em;
}

最后在瀏覽器審查元素的時候發(fā)現：

1、第一第二段落中，鼠標樣式都為move，字體大小都為2em，僅類b發(fā)揮了作用。

則說明：無論在標簽中class屬性里類的順序如何，最終相同的屬性值取css文件中聲明位置最后的那個。

2、第三第四段落中，鼠標樣式都為progress，字體大小都5em，僅類e發(fā)揮了作用，而在加載html頁面的時候，先加載1.css，再加載2.css。

則說明：無論在標簽中class屬性里類的順序如何，最終相同的屬性值取最后加載的css文件中聲明位置最后的那個。

3、第五第六段落中，鼠標樣式都為progress，字體大小都4em，類e起效，類d由于設定了!important，也起效。

則說明：設定了!important的值會優(yōu)先被選取。

后來我又測試了一下，把e中的font-size也加上!important之后，字體大小會變?yōu)?em，則對于都設定了!important的屬性值來說，遵循上面的規(guī)律。

相關文章

  • 淺談原生頁面兼容IE9問題的解決方案

    這篇文章主要介紹了淺談原生頁面兼容IE9問題的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起
    2020-12-16

  • 新版chrome瀏覽器設置允許跨域的實現

    這篇文章主要介紹了新版chrome瀏覽器設置允許跨域的實現,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起
    2020-11-30

  • css hack之\9和\0就可能對hack IE11\IE9\IE8無效

    每次設計一張網頁或一個表單，都被各種瀏覽器的兼容問題傷透腦筋，尤其是IE家族。在做兼容性設計時，我們往往會使用各種瀏覽器能識別的獨特語法進行hack，從而達到各種瀏覽
    2020-03-20

  • css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼

    這篇文章主要介紹了css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼,需要的朋友可以參考下
    2020-03-20

  • 解決CSS瀏覽器兼容性問題的4種方案

    這篇文章主要介紹了解決CSS瀏覽器兼容性問題的4種方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學
    2020-02-28

  • 常見的瀏覽器兼容性問題(小結)

    這篇文章主要介紹了常見的瀏覽器兼容性問題(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學
    2020-02-20

  • border-radius IE8兼容處理的方法

    這篇文章主要介紹了border-radius IE8兼容處理的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學
    2020-02-12

  • 淺談遇到的幾個瀏覽器兼容性問題

    這篇文章主要介紹了淺談遇到的幾個瀏覽器兼容性問題，詳細的介紹了幾種我遇到的問題和解決方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-09-26

  • base64圖片在各種瀏覽器的兼容性處理

    這篇文章主要介紹了base64圖片在各種瀏覽器的兼容性處理的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-14

  • 對常見的css屬性進行瀏覽器兼容性總結(推薦)

    這篇文章主要介紹了對常見的css屬性進行瀏覽器兼容性總結(推薦)的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-20

最新評論