嵌套CSS覆蓋元素類

我有一個HTML頁面只有一個按鈕嵌套CSS覆蓋元素類

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <link rel="stylesheet" href="css1.css" type="text/css"> 
     <link rel="stylesheet" href="css2.css" type="text/css"> 
    </head> 
    <body> 
     <div class="container"> 
      <button class="btn ovalbtn"> 
       Save 
      </button> 
     </div> 
    </body> 
</html>

而這些都是使用2個CSS類：

CSS1：

.container .btn { 
    font-size: 4.0em; 
}

CSS2：

.ovalbtn{ 
    font-size: 16px; 
}

我不知道爲什麼按鈕從CSS1獲取字體大小，而我用CSS2中的另一個類覆蓋它。我知道這與css的特殊性有關，但我對這方面的知識淺薄。

來源

2015-11-05 Mohamed Wagdy Khorshid

這是由於特異性。

類選擇具有特異性一定水平。兩個類選擇器比單個類選擇器更具體。因此，在具有兩個類選擇器的規則集（而不是其他任何東西）中的規則將使用單個類選擇器（而不是別的）覆蓋規則集中相同屬性的規則。

來源

2015-11-05 09:33:02 Quentin

你是對的，加入「.container .ovalbtn」解決這個問題。實際上我找不到任何說這種規則的文章。感謝您的幫助。 –

因爲在你的CSS 1個按鈕有更具體的規則比較CSS 2.如果兩個CSS有.container類在他們的統治，然後你的CSS 2將影響到該按鈕

所以，如果你想實現你的CSS 2然後按照以下步驟做一次更改： -

.container .ovalbtn { 
    font-size: 16px; 
}

來源

2015-11-05 09:34:58

瀏覽器顯示CSS1，因爲它比CSS2更具體。當瀏覽器看到不同的CSS代碼改變相同的元素時，它會應用更具體的元素。

你可以閱讀有關CSS Specificity here。

來源

2015-11-05 09:36:38

嵌套CSS覆蓋元素類

回答

相關問題