简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
css3 - CSS優先權問題
迷茫
迷茫 2017-05-16 13:24:45
0
3
692

一直在說important的優先順序最高，可是下面的結果是粉紅色的，貌似important並沒有什麼卵用

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>示例</title>
  <style>
  body {
    color: green !important;
  }
  
  .pink-text {
    color: pink;
  }
  </style>
</head>

<body>
  <h1 class="pink-text">Hello World!</h1>
</body>

但是經過變化以後，在同一個class內部確實是最高的，我原本以為無論在哪裡，只要加上important就會是最高的優先級，結果並不是這樣

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>示例</title>
  <style>
  .pink-text {
    color: green !important;
    color: pink;
  }
  </style>
</head>

<body>
  <h1 class="pink-text">Hello World!</h1>
</body>
迷茫
迷茫

业精于勤，荒于嬉;行成于思，毁于随。

全部回覆(3)
左手右手慢动作
左手右手慢动作2017-05-16 13:26:45 3樓

你的文字是在 pink-text 上的，一旦 pink-text 設定了 color，color 值就不是繼承，就沒 body 什麼事

點贊 +0
新增回覆
Peter_Zhu
Peter_Zhu2017-05-16 13:26:45 2樓

!important這個屬性不會被繼承

就是說你給body的字體顏色設定了!important，

如果子元素沒有設定其他字體顏色，就會繼承 body的顏色，但是這個繼承跟!important沒有關係。

如果子元素設定了其他字體顏色，就會以設定的字體顏色來顯示。

點贊 +0
新增回覆
世界只因有你
世界只因有你2017-05-16 13:26:45 1樓

謝邀！

!important 提升的是指定樣式規則應用優先權，關鍵在於指定二字，好好感受一下。

而對於你前者的範例很明顯不屬於這個範圍內。

另：

color: green !important;
color: pink;

這種寫法在IE6是無效的。

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！