处理h1字体大小异常

Question

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

h1字体大小例外的最佳方法是什么？

是否可以“作弊”并直接修改相关html中的h1标签，还是应该在sheet样式的h1中再添加一个class？在任何一种情况下，在搜索如何做时我应该使用什么词汇？

_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>

Answer 1

只需将 class 添加到您要修改的 H1，然后您就可以在您的项目中重新利用它以保持标准。

h1{
  font-size: 20px;
}

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

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

Answer 2

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

处理h1字体大小异常

Handling h1 font size exception

html

css

stylus