Question

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

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

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

<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>的整个内容。 / 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>}”中的第二段相似，那么您仍然可以执行此操作，而无需添加任何额外的类，如下面的代码段所示：< / p>

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>表示元素字体中“0”字符的宽度。 1ch单元具有较低的浏览器支持，我仅使用它作为示例。您可以使用ch或px或任何此类单位代替em。}

Answer 2

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

你也在使用id =“imgcontainer”。当你想为多个元素赋予相同属性而不是id的

时，id在css中是唯一的（至少应该是）

尝试将所有数字放在带有abc类的div中。现在把这些大胆的属性放在那个类中。

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

font-weight: bold;

Answer 3

虽然您想要使用css更改figure1等等，因为您知道css只处理装饰，而javascript处理用户操作，现在这只能通过javascript来首先找出数字，然后添加css类，css没有构建属性来自动找出并更改html内部元素的装饰

使段落内的文字“图x”为粗体

3 个答案: