将多种背景颜色设置为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>

Answer 2

h1.g1-mega {background:#ddd;}
h1.g1-mega:first-line {background:#ffd334;}

Answer 3

span {
  padding: 10px 8px;
  display: inline-block;
}

span:first-child {
  background-color: yellow
}

span:last-child {
  background-color: lightgreen;
}

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

Answer 4

你没有last-line选择器 - 所以你可以选择设置h1的样式并使用first-line选择器覆盖第一行：

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

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

---

请注意，并非所有属性都适用于first-line选择器 - 请参阅属性列表here：

只有一小部分CSS属性可以与:: first-line伪元素一起使用：

所有与字体相关的属性：font，font-kerning，font-style，font-variant，font-variant-numeric，font-variant-position，font-variant-east-asian，font-variant-caps，font-variant- alternates，font-variant-ligatures，font-synthesis，font-feature-settings，font-language-override，font-weight，font-size，font-size-adjust，font-stretch和font-family

所有与背景相关的属性：背景颜色，背景剪辑，背景图像，背景原点，背景位置，背景重复，背景大小，背景附件和背景混合模式

颜色属性

字间距，字母间距，文本修饰，文本转换和行高

文本阴影，文本装饰，文本装饰颜色，文本装饰线，文本装饰样式和垂直对齐。