2

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

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

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

<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>
4

3 回答 3

5

鉴于您有能力更改页面的标记和 CSS，并且您不想添加额外的元素（例如<strong>等），您可以尝试使用 CSS 计数器。计数器有很好的浏览器支持。

使用计数器，您可以自动编号数字，在内容之前添加文本“Figure 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单元的浏览器支持较低，我仅使用它作为示例。您可以使用pxorem或任何此类单位代替ch.

于 2015-06-20T06:47:44.233 回答
2

您可以将所需的属性放在一个类中，然后将元素添加到该类中。

你也在使用 id="imgcontainer"。id 在 css 中是唯一的（至少应该是），当您想为多个元素提供相同的属性时，使用类而不是 id

尝试将所有图形放在 abc 类的 div 中。现在将这些粗体属性放在那个类中。

这是您需要在 div 中添加的粗体属性。

font-weight: bold;
于 2015-06-20T06:28:06.490 回答
2

虽然您想使用 css 将 figure1 等更改为粗体，但您知道 css 仅处理装饰，而 javascript 处理用户操作，现在只能通过 javascript 来实现，首先找出图形单词，然后添加css类，css没有内置属性自动查找并更改html内部元素的装饰

于 2015-06-20T06:30:52.127 回答