嵌套的div沒有被父母的風格，使用*樣式代替

我不明白爲什麼最下面的嵌套div不是與#smaller-size大小相同。這是一個直接的後代。這是因爲全球*風格更具體嗎？這真的是對我的頁面進行直覺衝突。我錯過了什麼？謝謝！嵌套的div沒有被父母的風格，使用*樣式代替

* { font-size: 15pt; } 
 
#smaller-size { font-size: 0.8em; }

<div> 
 
    This should be the size specified by * (and it is) 
 
    <div id="smaller-size"> 
 
     This should be the smaller size (and it is) 
 
     <div> 
 
      This is nested in #smaller-size, so it should also be smaller (but it's not!) 
 
     </div> 
 
    </div> 
 
</div>

來源

2016-12-07 Matt Powell

有什麼理由要使用'*'選擇器嗎？爲什麼不定義身體的15pt大小？然後'.smaller-size'內的所有內容將繼承0.8em –

如果是新項目，請重新考慮如何定義初始字體大小。如果項目太遠了（遺留項目），那麼試試這個：https://jsfiddle.net/egdsfwvL/ – seemly

是因爲全球*風格更具體嗎？

不是。這是因爲它匹配元素而#smaller-size沒有。

只有當兩個選擇器匹配相同的元素時，特異性才起作用。

如果你沒有* { font-size: 15pt; }，則內DIV會對font-size的默認值，這將是沿着100%（即大小相同的父元素）線的東西。

你應該設置字體大小在body並讓繼承採取其餘的情況。雖然有幾個陷阱：

表單控件不默認爲100％，所以你可能需要明確設置input元素等
怪癖模式的字體大小可能不會繼承到由表默認，所以確保你有一個觸發標準模式的文檔類型
pt是一個爲物理媒體設計的單元。它不能在屏幕上準確渲染。考慮使用不同的單位（像素）。

來源

2016-12-07 16:39:58 Quentin

優秀的解釋。我沒有完全理解默認值的概念，以及沒有直接應用樣式的元素簡單地採用這些值的想法。在字體大小的情況下，知道默認值是'100％'（我一直認爲它是繼承）是很有用的。 –

是的，那是因爲你的全球*風格。嵌套的div沒有class或id，瀏覽器試圖找到第一個適用的樣式元素，它是*。

來源

2016-12-07 16:39:04

它不使用第一個適用的，它使用最具體的一個。在這種情況下，只有一個匹配。 – Quentin

@Quentin是的，你說得對，我用錯了詞。 –

的「*」選擇的特異性可能是最低的（0,0,0,0），但它適用於適用的每一個元素，所以每格爲：

* { font-size: 15pt; }

通過您正在使用＃選擇設置新的特異性時間：

#smaller-size { font-size: 0.8em; }

只有具有相應的ID選擇的元素將有比其他人，受*，這些都是他們的高特異性。在此特定元素（0,1,0,0）中創建特定值。此標識僅適用於該特定元素。

例如，如果你stablish類似：

#smaller-size>div { font-size: 0.2em }

然後根據編號較小尺寸的所有元素的div將有較高的特異性比那些受剛*

創建類似的東西：

<div> -- specificity (0,0,0,0) = 0 
    <div id="smaller-size"> -- specificity (0,1,0,0) = 100 
    <div> -- specificity (0,1,0,1) = 101 
    </div> 
    </div> 
</div>

利用該邏輯：

* { font-size: 15pt; } 
 
#smaller-size { font-size: 0.8em; } 
 
#smaller-size>div { font-size: 0.7em; } 
 
#smaller-size>.smaller { font-size: 0.6em; }

<div> 
 
    specificity of this element (0,0,0,0) = 0 
 
    <div id="smaller-size"> 
 
     specificity of this element (0,1,0,0) = 100 
 
     <div> 
 
      specificity of this element (0,1,0,1) = 101 
 
     </div> 
 
     <div class="smaller"> 
 
      specificity of this element (0,1,1,1) = 111 
 
     </div> 
 
     <div class="smaller" style="font-size: 0.5em;"> 
 
      specificity of this element (1,1,1,1) = 1111 
 
     </div> 
 
     <p> 
 
      specificity of this element (0,0,0,0) = 0 
 
     </p> 
 
    </div> 
 
</div>

Here是一個很好的文章，解釋的特異性是如何工作的。

來源

2016-12-07 17:21:19 Sergio

嵌套的div沒有被父母的風格，使用*樣式代替

回答

相關問題