有没有更简单的方法使列表中的几个首字母在HTML中粗体？

Question

1953年的--通过一个矮小、结实的小麦品种与美国的高酵母品种杂交，形成了一种对肥料反应良好的品种。它还提供了墨西哥95%的小麦。

1962 -访问德里，及时将他高产的小麦品种带到印度次大陆，以帮助减轻因人口迅速增长而造成的大规模饥饿。

1970 -获得诺贝尔和平奖

1983 -帮助七个非洲国家大幅增加玉米和高粱产量。

1984 -成为得克萨斯A&M大学的杰出教授

就像上面的例子一样，我想做一个无序的列表，每次我都应该用粗体表示年份数字。我有没有办法一次做到这一点，而不是每次输入每一行时都让他们大胆呢？

Answer 1

关键的想法是使用CSS风格的元素包装一年一次，在一个地方，无论有多少这些列表项目。当然，每年都需要额外的标记。我给你们举两个例子。

使用ol

您可以使用ol (有序列表，因为您似乎拥有按时间顺序排列的数据)，并将年数封装在span中，如下所示：

​

.chrono {
  list-style: none;
  padding: 0;
}

.chrono .year {
  font-weight: bold;
}

.chrono .year::after {
  content: " -";
}

<ol class="chrono">
  <li><span class="year">1953</span> crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertalizer. It goes on to provide 95% of Mexico's wheat.
  </li>
  <li><span class="year">1962</span> Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population
  </li>
  <li><span class="year">1970</span> receives the Nobel Peace Prize
  </li>
  <li><span class="year">1983</span> helps seven African countries dramatically increase their maize and sorghum yields
  </li>
  <li><span class="year">1984</span> becomes a distinguished professor at Texas A&M University
</ol>

​

提示:您可以通过删除每个span元素上的class="year"来减少标记。然后通过CSS将它们称为.chrono li span。

使用dl

或者，您可以使用dl (描述列表，正如您描述特定年份的详细信息)，可能如下所示：

​

.chrono {
  list-style: none;
  padding: 0;
}

.chrono dt {
  font-weight: bold;
  display: inline;
}

.chrono dd {
  display: inline;
  margin: 0;
}

.chrono dd::after {
  content: "\A";
  white-space: pre;
}

.chrono dt::after {
  content: " -";
}

<dl class="chrono">
  <dt>1953</dt>
  <dd>crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertalizer. It goes on to provide 95% of Mexico's wheat.</dd>
  <dt>1962</dt>
  <dd>Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population</dd>
  <dt>1970</dt>
  <dd>receives the Nobel Peace Prize</dd>
  <dt>1983</dt>
  <dd>helps seven African countries dramatically increase their maize and sorghum yields</dd>
  <dt>1984</dt>
  <dd>becomes a distinguished professor at Texas A&M University</dd>
</dl>

​

注意:在这里，我使用this technique强制dt和dd元素的内联外观。

Answer 2

这在CSS中是不可能的。它将使用JavaScript (例如爆炸功能)来完成。最简单的方法是在HTML标记中标记一个单词.