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>

请检查小提琴

第二行 CSS 不起作用。

标签： htmlcsscss-selectors

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>