html - 将段落内的文本 "figure x"设为粗体

Question

我想将粗体格式应用于图 1、图 2、...直到 图 111。

我只能更改 HTML 和 CSS，并且需要在不使用 JavaScript 或 jQuery 的情况下执行此操作。除了添加<strong>还有什么办法吗？在 HTML 中？

有::first letter在 CSS 中，但没有 ::first word .我可以使用 ~like %figure 吗？在 CSS 中？

<p>Figure 3 All incidences of ...</p>
<div id="imgcontainer" style="height: auto;">
  <p><img src="Images/misc/newsletters/msIssue7_monoAnti4_850x550.png"     style="margin-bottom: 10px;" /></p>
  <p>Figure 4 ...</p>
</div>
<div id="imgcontainer" style="height: auto;">
  <p><img src="Images/misc/newsletters/msIssue7_monoAnti5_350x370.png" style="float: left; width: 450px; margin: 8px 20px 8px 0px;" /></p>
  <p>Figure 5 Sequence information obtained from MS/MS analysis of capillary electrophoresis ...</p>
</div>
   <p><img src="Images/misc/newsletters/msIssue7_monoAnti6_850x350.png" style="width: 850px; height: 200px; margin: 8px 8px 8px 0px;" /></p>
   <p>Figure 6 Separation of ...</p> 

Answer 1

鉴于您可以更改页面的标记和 CSS，并且不想添加额外的元素(如 <strong> 等)，您可以尝试使用 CSS 计数器。专柜有很good browser support .

使用计数器，您可以自动为图形编号，在内容前添加文本“图 X”并设置样式，而无需对标记进行任何其他更改。这样做的一大优势是您不必手动为它们编号，甚至不必担心订单将来会发生任何变化。 CSS 会自动处理它。您还可以添加所需的任何额外样式。

下面是一个示例片段:

body {
  counter-reset: figure; /* Initializes the counter to 0 */
}
p {
  counter-increment: figure; /* Increment the counter everytime p tag is encountered in DOM */
}
p:before {
  content: "Figure " counter(figure)" "; /* Set Figure + Counter value as content */
  font-weight: bold;
  color: red;
}

<p>Lorem Ipsum...</p> <!-- Counter = 1, Before Content = Figure 1 -->
<p>Lorem Ipsum...</p> <!-- Counter = 2, Before Content = Figure 2 -->
<p>Lorem Ipsum...</p> <!-- Counter = 3, Before Content = Figure 3 -->
<p>Lorem Ipsum...</p> <!-- Counter = 4, Before Content = Figure 4 -->
<p>Lorem Ipsum...</p> <!-- Counter = 5, Before Content = Figure 5 -->

如果你不想给所有<p>编号标签并只想编号特定的 <p>标签然后你可以给他们一个独特的类，就像下面的代码片段一样。 (注意:即使您添加了一个额外的类，粗体文本也仅限于“图 X”文本，并不适用于 <p> 的全部内容)。

body {
  counter-reset: figure;
}
p.count {
  counter-increment: figure;
}
p.count:before {
  content: "Figure " counter(figure)" ";
  font-weight: bold;
  color: red;
}

<p class='count'>Lorem Ipsum...</p>
<p>Lorem Ipsum...</p>
<p class='count'>Lorem Ipsum...</p>
<p class='count'>Lorem Ipsum...</p>
<p>Lorem Ipsum...</p>

---

如果像您问题中提供的片段一样，“图 x”文本仅适用于 div class='imgcontainer' 中的第二段，您仍然可以在不添加任何额外类的情况下执行此操作，如以下代码段所示:

body {
  counter-reset: figure;
}
.imgcontainer > p + p {
  counter-increment: figure;
}
.imgcontainer > p + p:before {
  content: "Figure " counter(figure);
  padding-right: 1ch; /* More padding-right means more space between Figure x and text */
  font-weight: bold;
  color: red;
}

<div class='imgcontainer'>
  <p>
    <img src='http://placehold.it/100/100'>
  </p>
  <p>Some Description</p>
</div>
<div class='imgcontainer'>
  <p>
    <img src='http://placehold.it/100/100'>
  </p>
  <p>Some Description</p>
</div>
<div class='imgcontainer'>
  <p>
    <img src='http://placehold.it/100/100'>
  </p>
  <p>Some Description</p>
</div>
<div class='imgcontainer'>
  <p>
    <img src='http://placehold.it/100/100'>
  </p>
  <p>Some Description</p>
</div>

^{注意: 1ch表示元素字体中“0”字符的宽度。 ch unit 对浏览器的支持较低，我仅将其用作示例。您可以使用 px或 em或任何此类单位而不是 ch .}