2

Figure 1、Figure2、 ... Figure 111まで太字の書式設定を適用したいと思います。

HTML と CSS のみを変更でき、JavaScript や jQuery を使用せずにこれを行う必要があります。<strong>HTMLに追加する以外に方法はありますか？

::first letterCSSにはありますが、ありません::first word。%figureCSS で~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 カウンターの利用を試みることができます。カウンターは非常に優れたブラウザー サポートを備えています。

カウンターを使用すると、図に自動番号を付けたり、コンテンツの前に「図 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>タグのみに番号を付けたい場合は、以下のスニペットのように一意のクラスを指定できます。(注:追加のクラスを追加しても、太字のテキストは "Figure 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>

質問で提供されたスニペットのように、「Figure x」テキストが 内の 2 番目の段落にのみ適用される場合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ユニットはブラウザのサポートが低く、例としてのみ使用しました。pxの代わりにまたはemまたは そのような単位を使用できますch。

于 2015-06-20T06:47:44.233 に答える
2

css を使用して figure1 などを太字に変更したいのですが、css は装飾のみを処理し、javascript はユーザー アクションを処理することを知っているため、これは最初に図の単語を見つけてから、javascript によってのみ達成できます。それにcssクラスを追加すると、cssには属性が組み込まれていないため、自動的に検出され、html内部要素の装飾が変更されます

于 2015-06-20T06:30:52.127 に答える