处理 h1 字体大小异常

问题描述

我想在一个实例中减小我的 h1 文本的字体大小 - 在我的索引页上减少一行。这一行，两个字的文本，是索引页上 h1 的唯一实例（index.ejs 中的部分 id“writing”）。这是一个 Hexo 网站 (Node.js) — Stylus 中的 css。

对 h1 字体大小进行例外处理的最佳方法是什么？

是否可以“作弊”直接修改相关html中的h1标签，还是应该在样式表中为h1添加另一个类？在这两种情况下，在搜索如何操作时应该使用哪些词汇？

_extend.styl

$base-style
  h1,.h1
    display: block
    margin-top: 3rem
    margin-bottom: 1rem
    color: $color-accent-1
    letter-spacing: .01em
    font-weight: 700
    font-style: normal
    font-size: 1.5em
    font-family: $font-family-sans

    antialias()

style.styl

@import "_extend"

 h1 a,.h1 a,h2 a,h3 a,h4 a,h5 a,h6 a
    background: none
    color: inherit
    text-decoration: none

  h1 a:hover,.h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover
    underline(6px,$color-link)

index.ejs

<section id="writing">
  <span class="h1"><a href="<%- url_for(theme.nav.articles) %>"><%= __('index.articles') %></a></span>
  ...
  ...
</section>

解决方法

只需将一个类添加到您要修改的 H1，然后您就可以在整个项目中重新利用它以维护一个标准。

h1{
  font-size: 20px;
}

h1.title--small{
  font-size: 15px;
}

<h1>Default title</h1>
<h1 class="title--small">Small title</h1>

,

为该 h1 标签分配一个类名并使用该类名实现您的自定义 css，它将重置最初应用的 css