html - 设置多种背景颜色为H1

Question

我在 SO 上搜索了很多类似的问题，但没有得到我想要的结果。我想要类似这样的:

我想用不同的 BG 颜色设置两条不同的线条

我试过这种风格

h1.g1-mega.g1-mega-1st.entry-title:first-line {background:#ffd334;}
h1.g1-mega.g1-mega-1st.entry-title:last-line {background:#ddd;}

<h1 class="g1-mega g1-mega-1st entry-title" itemprop="headline">Top 25 Wild Bird Photographs of the Week: Mountain Birds </h1>

请查看fiddle

第二行 CSS 不工作。

Answer 1

span:first-child {
  background-color: yellow;
  padding: 10px;
}

span:last-child {
  background-color: lightgreen;
  padding: 10px;
}

h1 {
  line-height: 1.8;
}

<h1><span>Top 25 Wild Bird Photographs</span><br>
    <span>of the Week: Mountain Birds </span>
</h1>