无需编辑即可将样式添加到h1标记

Question

我是html / css的新手，想知道是否有人就我当前遇到的问题提出建议。

对于我正在工作的网站，我在h1 css标记下有标题。我想为它添加填充，但我不想影响具有相同h1标记的其他页面上的所有其他标题。在css中向h1添加填充而不影响使用相同标记的所有其他标题的最佳方法是什么。

感谢您抽出宝贵时间阅读我的问题^^，我为这么简单的问题道歉

Answer 1

方法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

Answer 2

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

将此插入您的CSS文件，这应该适合您

这只会影响h1中的header。 所以你的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.main {
  padding:5px;
}

所有其他标题都将使用默认样式。 在HTML中，您只需添加类：

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

Answer 5

这假设您想要页面上的第一个H1标签。如果你给出了周围的HTML，我可以给出一个更好的选择器，但这会在页面上设置H1标签的第一个实例。

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