css - 将样式添加到 h1 标签而不进行编辑

Question

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

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

感谢您花时间阅读我的问题^^，对于这么简单的问题，我深表歉意

score 1 · Accepted Answer

方法一

您可以定义内联样式

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

你可以创建一个类

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

然后你的 CSS 看起来像

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

通过此页面独有的某些父 div 访问它。你的 CSS 将是

#mainPage h1{
    padding-bottom: 10px
}

score 0 · Accepted Answer

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

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

这只会h1影响header. 所以你的 HTML 将是：

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

score 0 · Accepted Answer

为您的特定 h1 元素添加一个类（或 id）；例如：

HTML

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

CSS

h1.header {
    padding: 2em;
}

尽管对于标题，您应该使用 HTML5<header>元素。

score 0 · Accepted Answer

为了做到这一点，你可能需要给那个头一个类名。例如，如果您只希望样式反映在主页上，您应该指定一个类名：

h1.main {
  padding:5px;
}

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

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

score -1 · Accepted Answer

这假设您想要页面上的第一个 H1 标记。如果您提供周围的 HTML，我可以提供更好的选择器，但这将设置页面上 H1 标记的第一个实例的样式。

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