在沒有編輯的情況下將樣式添加到h1標記

Question

我對html/css感興趣，想知道是否有人對我遇到的當前問題提出建議。

對於我正在使用的網站，我在h1 css標記下標題。我想爲它添加填充，但我不想用其他h1標籤來影響其他頁面上的所有其他標題。在css中向h1添加填充而不影響所有使用相同標記的其他標題的最佳方法是什麼？

感謝您抽出時間來閱讀我的問題^^我爲這樣一個簡單的問題道歉

Answer 1

爲了做到這一點，你可能會需要給這頭一類的名稱。 如果你只想要的樣式反映在主頁上，例如，你應該指定一個類名：

h1.main { 
    padding:5px; 
} 

所有其他頭將使用默認樣式。 在你的HTML，則只需添加類：

<h1 class="main">Title</h1> 

Answer 2

header h1{ /*Some sort of more specific selector*/ 
    padding: /*Value*/; 
} 

插入到這個CSS文件，這應該爲你工作

這將僅影響header中的h1。 所以你的HTML是：

<header> 
    <h1>Hello World!</h1> 
</header> 

鏈接：jsfiddle to check it out

Answer 3

添加一個類（或ID）到您的具體h1元素;例如：

HTML

<h1 class="header">blabla</h1> 

CSS

h1.header { 
    padding: 2em; 
} 

雖然標題，您應該使用HTML5 <header>元素。

Answer 4

這假定您需要頁面上的第一個H1標籤。如果你給周圍的HTML，我可以給一個更好的選擇器，但是這樣會爲頁面上H1標籤的第一個實例添加樣式。

h1:nth-child(1) { 
    padding: 1em; 
} 

Answer 5

方法1

您可以定義內嵌樣式

<h1 style="padding-bottom: 10px">Header</h1> 

方法2

你可以創建一個類

<h1 class="specialHeader">Header</h1> 

然後你的CSS看起來是這樣的

次

h1.specialHeader { 
    padding-bottom: 10px;  
} 

方法3

一些家長DIV訪問它是唯一的這個頁面。你的CSS將

#mainPage h1{ 
    padding-bottom: 10px 
} 

JFiddle