僅將樣式應用於選定的元素，而不影響兒童元素

這非常簡單，所以我確信我只是缺少一些明顯的東西。僅將樣式應用於選定的元素，而不影響兒童元素

說我有這個例子代碼：

<main> 
    <header>Header</header> 
    <section> 
     Content 
    </section> 
    <section> 
     Content 
    </section> 
    <section> 
     Content 
    </section> 
</main>

和初始CSS：

main{text-align:center;} 
section{display:inline-block;width:33%;}

所以，我有三列佔用更多或更少的每個頁面的三分之一。現在，由於編寫代碼的方式，頁面上會有空白區域。我的首選方法是設置*{font-size:small}，然後添加body>main{font-size:0;}。

當然，這很好，在一個簡單的頁面上，其中字體是相同的。但是，在這裏和那裏使用不同大小的字體和標題標記，這不起作用。

我想我只是誤解了>選擇器的作用，但我試圖尋找的是一個選擇器，它可以對元素進行樣式設置，而不會將所述樣式應用於子元素。在這種情況下，我想對我的主要元素進行樣式設置，但我不想要影響標題或節元素的樣式。

這樣做的正確方法是什麼？

在沒有人提出它之前，我不希望使用其他方法去除空白（HTML註釋，將結束標記的最後部分移動到下一行等），因爲它們看起來很醜我更喜歡我的代碼看起來像我的頁面一樣。

來源

2014-02-15 Hiigaran

你不會誤解'>'選擇器。問題在於繼承。一些屬性由元素的後代繼承，即使您確保只使用'>'將屬性應用於該元素。您的問題的解決方案取決於正在使用的可繼承屬性。 – BoltClock

那麼，由於我想如何刪除我的元素之間的空白，我設置了font-size屬性。我唯一的問題是頭元素h1到h6發生了什麼。我希望他們保持其默認字體大小，但他們從父元素繼承屬性。我目前在*上將font-size設置爲較小，但是這會使h1與h6的大小相同。 – Hiigaran

首先：我不完全確定它是否有效，現在還不能完全測試。這應該是一個評論，但我缺乏這樣做的聲譽。抱歉。

問題是，字體大小是從它的父項繼承的屬性之一，像「小」這樣的值不設置絕對大小，但相對於繼承的大小。所以我會嘗試你的主層後，大小正確復位，使用絕對值，而不是一個相對

body>main>*{font-size:18px;}

的重要組成部分，顯然是不使用相對大小，但是，我不知道如何保存直到用戶指定的默認字體大小。此外，您必須確保任何文字具有非中等字體大小（因此在您的情況下爲任何文本）至少是主要的孫子，因爲所有直接子項的字體大小都將被覆蓋。

希望這會幫助你; bw

來源

2014-02-16 23:56:34 Tobl

恐怕它仍然不能解決丟失默認h1-h6尺寸的問題。否則，我可能只是使用'small'的字體大小來表示*，0表示body> main。這是我無法解決的棘手的繼承問題。 – Hiigaran

您已經用'* {font-size：small}'覆蓋了所有的默認字體大小。您可以嘗試添加：not（）選擇器，但是，對幾個例外（：not（h1，h2，h3，h4，h5，h6））的支持遠不穩定。一般意見是，不要選擇*，而是使用逗號分隔的所有要設置樣式的元素列表（白名單而不是黑名單）。這也將確保您在未來添加新類型時不會意外地設置元素的樣式。 – Tobl

僅將樣式應用於選定的元素，而不影響兒童元素

回答

相關問題